@CSS intimidate project, how to create 3 text blocks and layout over image.. help?

Hi,
I am currently finishing the intimidate project website but I am struggling to create the lower half (please see img)
How to create 3 text blocks that are aligned and over an image.

I’m not sure how to write the code exactly and could do with some help?
Thanks!

Hi there,

There are two easy ways I will share with you to do this.

Example Image:

The first way you can achieve this is by positioning the image as absolute.

<div class="cta">
  <img src="https://source.unsplash.com/random/1200x500"/>
  <h2>Locations</h2>
  <div class="addr">
    <div class="sq"></div>
    <div class="sq"></div>
    <div class="sq"></div>
  </div>
</div>
.cta {
  height: 500px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  color: white;
  font-size: 22px;
}

img {
  position: absolute;
}

h2 {
  z-index: 1;
  text-align: center;
  margin: 0;
}

.addr {
  z-index: 1;
  width: 1200px;
  display: flex;
  justify-content: center;
}

.sq {
  height: 300px;
  background-color: black;
  width: 300px;
  margin: 15px 40px;
}

Second, instead of using <img> in the HTML, set the .cta background-image instead.

<div class="cta">
  <h2>Locations</h2>
  <div class="addr">
    <div class="sq"></div>
    <div class="sq"></div>
    <div class="sq"></div>
  </div>
</div>
.cta {
  background-image: url('https://source.unsplash.com/random/1200x500');
  height: 500px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*All other CSS is the same*/

Can you explain how these two examples work? When I can explain how certain structures work, I find it much easier to use them for myself.

(There are also ways to do so with grid, but I am not too learned with using grid-template yet. :slight_smile: )

1 Like

Thank you for your informative response!

That’s great, I will take learn from this thanks again!