Two ways to add text over images
Tags: webdev, beginners, css, tutorial
Published: 2023-05-13 22:00:00

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.<br>
{% codepen https://codepen.io/lensco825/pen/NWOYOMV %}

## Standard Way


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

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

```

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

```
<hr>

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

```html
<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>

```

```css
.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*/
```
<hr>

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

```html
<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>

```

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

```


{% codepen https://codepen.io/lensco825/pen/ZEqjEmB %}


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

```html
       <div class="exampleTwo">
      <h2>Climb the highest mountains</h2>
         </div>
```

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

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

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

```
{% codepen https://codepen.io/lensco825/pen/BaqPyNa %}

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

<hr>

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