Home/ Questions/Q 3905

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T07:03:07+00:00

Two ways to add text over images

  • 61k

A great thing to learn if you're a beginner to CSS is how to add text over images, after all, you see this type of feature in almost every website. So I'll be showing you two ways to do this.

Standard Way

  1. create a div or any other element and style it your way 
<div class="example">  </div>
Enter fullscreen mode Exit fullscreen mode 

.example {     width: 187px;     height: 347px;     border-radius: 10px;   font-family: Poppins; }
Enter fullscreen mode Exit fullscreen mode

2. put an image in a div with a position of absolute and an object-fit of cover. You should also make sure that the image has the same width and height as the parent. 

<div class="example">         <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">     </div>
Enter fullscreen mode Exit fullscreen mode 

.example > img {     width: inherit;     height: inherit;     object-fit: cover;     position: absolute;     border-radius: inherit; } /*Note: the inherit property value is used  to give something the same value as its parent*/
Enter fullscreen mode Exit fullscreen mode

3. add a text container with the same width and height as the parent but a position of relative. Fill in that container with the text and headers you want. position your text by adding flex to your container, then use either flex-start, center, or flex-end to position at either the top center or bottom of the parent. 

<div class="example">         <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"> <!--text container-->       <div class="exampleInfo"> <!--I also put the text in one smaller container so i can center the header-->         <div class="info1">             <h4>The Florida Keys</h4>           <p>Plane arriving at May 15th, 6am</p>         </div>       </div>     </div>
Enter fullscreen mode Exit fullscreen mode 

.exampleInfo {     color: white;     width: inherit;     height: inherit;     position: relative;     border-radius: inherit;     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 14.06%, #1E1E1E 100%); /*Placing the text at the bottom*/   display: flex;   align-items: flex-end;   text-align: center;   font-size: 20px }   .info1 > h4 {   display: flex;   align-items: center;   justify-content: center; }
Enter fullscreen mode Exit fullscreen mode

Background Image

Another way to add text over an image is by setting the image as the background. Here's an example on how to do so.

  1. Create a div or any other element with the content and text you want, then style it. 
       <div class="exampleTwo">       <h2>Climb the highest mountains</h2>          </div>
Enter fullscreen mode Exit fullscreen mode 

.exampleTwo {   width: 187px;   height: 347px;   border-radius: 10px;   text-align: center;   font-family: Aboreto; }
Enter fullscreen mode Exit fullscreen mode

2. Give that element a background-image using the url() value. Make sure it fits using background-size: cover. 

.exampleTwo {   width: 187px;   height: 347px;   border-radius: 10px;   text-align: center;   font-family: Aboreto; /*Adding the image*/     background-image: url('https://images.unsplash.com/photo-1683727610671-646dbf56aedf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'); background-size: cover; }
Enter fullscreen mode Exit fullscreen mode

Which is better

Even though the background image has way has less hTML and CSS needed, if you don't pick a big enough background image then that background image won't be responsive to large sized deives such as pc's. So whichever one is better is your choice, I usually use background image but for major projects i'll use the standard way from time to time.

Thank you for reading! It's been a while since the last time i've been going to the DEV community since I had state testing, but thank goodness that's over. You'll see me again talking about making a minimalistic website, have a great day/night 👋.

beginnerscsstutorialwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,