Create dynamically-sized html banner with overlaying text

Question

I am trying to place a rectangular image (1400 x 200 px) with some in-line text on it that automatically re-dimensions depending on the browser window size. Trying to add some CSS from here does not have any effect (the image does not even display).

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
  backgrdheader {
    background-image:    url(http://lorempixel.com/1400/200/nature/1);
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
    height:              200px;
  }

  textstyle {
    position:     absolute;
    top:          50%;
    left:         40%;
    transform:    translate(-50%, -50%);
    padding-left: 200px;
  }
  </style>
</head>

<body>
  <div class="backgrdheader">
    <div class="textstyle">
      <span>
        Text_1
        Text_2
        Text_3
      </span>
    </div>
  </div>
</body>
</html>

John · Accepted Answer · 2020-12-08T10:07:41.327

Your image is not displaying because you forgot to add the . to backgrdheader in CSS to call the class. You also forgot the . in textstyle as well. Also you probably want to add position: relative; to the .backgrdheader class in CSS to have your text centerd over the image. Please look here:

<!DOCTYPE html>
<html>
<head>
  <style>
  .backgrdheader {
    background-image:    url(http://lorempixel.com/1400/200/nature/1);
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
    height:              200px;
    position: relative;
  }

  .textstyle {
    position:     absolute;
    top:          50%;
    left:         40%;
    transform:    translate(-50%, -50%);
    padding-left: 200px;
  }
  </style>
</head>

<body>
  <div class="backgrdheader">
    <div class="textstyle">
      <span>
        Text_1
        Text_2
        Text_3
      </span>
    </div>
  </div>
</body>
</html>

Create dynamically-sized html banner with overlaying text

1 Answers1