My text can't move past the background image

Question

I'm a newbie developer who is just starting to create his first actual web page, and I've run into a few problems. There's some text I put into a flexbox that won't go under the image.

.title {
  text-align: center;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: white
}

#hero {
  background-image: url("river.webp");
  background-size: cover;
  padding: 10px 0 100px 0
}

body {
  margin: 0
}

.three {
  color: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  padding-top: 100px
}

<div id="hero">
  <h1 class="title">This is Cypress!</h1>
  <div class="three">
    <h4>Lively malls</h4>
    <h4>Challenging Escape Rooms</h4>
    <h4>Relaxing on the lake</h4>
  </div>
</div>

I tried adding margins and padding to the top. However, the background image just enlarges with the text. How can I fix this problem?

Answer 1

.wrapper {
  border: 1px solid #555;
}

.wrapper > img {
  width: 100%;
}

.title {
  text-align: center;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0
}

.three {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  padding-top: 100px
}

<div class="wrapper">
  <img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg">
  <h1 class="title">This is Cypress!</h1>
  <div class="three">
    <h4>Lively malls</h4>
    <h4>Challenging Escape Rooms</h4>
    <h4>Relaxing on the lake</h4>
  </div>
</div>

Hey, I agree with @ralph.m you should use a normal image tag to achieve this. I created a short snippet for you, let me know if it helps :) You would need to change the img src attribute to your image.

EDIT:

.three {
    color: #2337EC;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-around;
    padding-top: 100px;
}

.three h4 {
    text-align: center;
}

<div class="three">
  <div>
    <img src="mall.jpg">
    <h4>Lively malls</h4>
  </div>
  <div>
    <img src="escape.jpg">
    <h4>Challenging Escape Rooms</h4>
  </div>
  <div>
    <img src="relax.jpg">
    <h4>Relaxing on the lake</h4>
  </div>
</div>

If you want you can try this one. Essentially I added the <div> around each content block in your div.three and added the css for your headings to be centered. Might look a little better, if you want to try :)