Two ways to add text over images

#webdev #beginners #css #tutorial

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

create a div or any other element and style it your way

<div class="example">
 </div>

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

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>

.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*/

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>

.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;
}

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.

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>

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

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;
}

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 👋.