How to position text over top an image like this?

Question

I have to remake a page for my web design class. I've got the rest done, but how do I add a white box over an image and position the text so that it's within the box? Like where it says "adventures off the beaten path" or "hiking" or "camping." Should I be using a div?

Basically, how do I make it look like this:

    <div class="white_box">
        <img src="img/banner image.png">
        <h2>ADVENTURES OFF THE BEATEN PATH</h2>
        <p>It's time to explore your path. Where will you go?</p>
    </div>

    <h3>POPULAR ARTICLES</h3>
    <div class="red_box"></div>

    <div class="hiking">
        <img src="img/hiking trail image.png" alt="trail" title="trail">
        <h4>HIKING</h4>
        <p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
    </div>  

    <div class="camping">
        <img src="img/tent image.png" alt="tent" title="tent">
        <h4>CAMPING</h4>
        <p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
    </div>

.white_box {
    width: 430px;
    height: 200px;
}
h2 {
    font-size: 48px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}
p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
}
.red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
    margin-left: 10px;
}

h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}

Answer 1

Try this code. You can use the grid structure for the second section. Here is your solution. You use the main div height and width as per your requirement.

CSS:

  .white_box {
    width: 500px;
    height: 500px;
    position: relative;
  }
  .image_div {
    width: 100%;
    height: 100%;
  }
  .image_div img {
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
  }
  .content_div {
    position: absolute;
    background-color: #fff;
    bottom: 10px;
    left: 30px;
    right: 30px;
    padding: 10px;
  }
  .red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
  }
  p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
  }
  h2 {
    font-size: 30px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
  }
  h3{
    margin-bottom: 0;
  }
  h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
 } 

HTML:

  <div class="white_box">
  <div class="image_div">
    <img src="download.jpg">
  </div>
  <div class="content_div">
    <h2>ADVENTURES OFF THE BEATEN PATH</h2>
    <p>It's time to explore your path. Where will you go?</p>
  </div>
</div>

<h3>POPULAR ARTICLES</h3>
<div class="red_box"></div>

<div class="hiking">
  <img src="images.jpg" alt="trail" title="trail">
  <h4>HIKING</h4>
  <p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
</div>  

<div class="camping">
  <img src="images.jpg" alt="tent" title="tent">
  <h4>CAMPING</h4>
  <p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
</div>

Answer 2

Should I be using a <div>?

Yes. By using a <div> element, this will allow you to have an extremely high level of control over all of the individual elements that you want to work with (e.g. your image, your message box, etc.)

The Background

A common approach would be to use CSS along with a <div> as your image via the background property with something like this along with several other properties that govern size, positioning, and more:

.pretty-background {
      /* Settings for your image */
      background: url('yourimage.png');
      background-size: cover;
      background-position: center;
      /* Size info */
      height: 400px;
      width: 100%;
      /* Positioning (important as it dictates how child elements will be positioned) */
      position: relative;
}

.pretty-background {
  /* Settings for your image */
  background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size: cover;
  background-position: center;
  /* Size info */
  height: 400px;
  width: 100%;
  /* Positioning (this is important as it dictates how child elements will be positioned */
  position: relative;
}

<div class='pretty-background'>

</div>

Next, you need to focus on your standout box and how it is positioned, which can be either absolute or relative, and function as they sound (e.g. this element appears x pixels from the right, or this element appears at this specific spot).

The Inner Box

Again, you'll add another child <div> element for this box that will be positioned relative to the bottom-left of your previous background:

.standout-box {
      /* Box color */
      background: #FFF;
      /* Size info */
      height: 100px;
      width: 300px;
      /* Spacing from parent */
      margin: 20px;
      padding: 10px;
      /* Positioning (appear 0px from lower left corner, spacing provided by margin) */
      position: absolute;
      left: 0;
      bottom: 0;
}

.pretty-background {
  background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size: cover;
  background-position: center;
  height: 400px;
  width: 100%;
  position: relative;
}

.standout-box {
  /* Box color */
  background: #FFF;
  /* Size info */
  height: 100px;
  width: 300px;
  /* Spacing from parent */
  margin: 20px;
  padding: 10px;
  /* Positioning (appear 0px from lower left corner, spacing provided by margin) */
  position: absolute;
  left: 0;
  bottom: 0;
}

<div class='pretty-background'>
  <div class='standout-box'>
    <b>This is a test</b>
    <p>
      Here is some more content
    </p>
  </div>
</div>

That's it! It's really just those two <div> elements working in conjunction:

<div class='pretty-background'>
  <div class='standout-box'>
    <b>This is a test</b>
    <p>
      Here is some more content
    </p>
  </div>
</div>

At this point, you should have a reasonable starting point to adjust your positioning, the sizes of your boxes, etc.

Answer 3

Try this code:

.white_box {
   background-image: url(your image path);
   height: 65vh;
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; 
}
.white_box_text{
 padding: 15px;
 width: 350px;
 background-color: #fff;
 position: absolute;
 bottom: 25px;
 left: 25px;
}
h3{
 margin-top: 20px;
 font-size: 40px;
 margin-left: 10px;
}
h2 {
    font-size: 42px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}
p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
}
.red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
    margin-left: 10px;
}
h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}

<!DOCTYPE HTML>
<html>
  <head>
     <link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
  <body>
   <div class="white_box">
    <div class="white_box_text">
        <h2>ADVENTURES OFF THE BEATEN PATH</h2>
        <p>It's time to explore your path. Where will you go?</p>
    </div>
  </div>
   <h3>POPULAR ARTICLES</h3>
    <div class="red_box"></div>   
  </body>
</html>