Header banner with css only?

Question

I'm a beginner in css and i'm trying to create a hero banner with css only and make it responsive, i'm quite confused with positioning of the texts on top of the image, if i zoom the page or resize it down the texts don't respond.

<header class="main-header">            
        <img src="imgs/header.jpg"/>
        <div class="title">
        <h1>This is a title</h1>
        <p>some texts here</p>
        </div>
</header>

css:

.main-header img {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.title {
    position: relative;
    top: -450px;
    left: 10%;
    text-align: center;
    display: inline-block;
    color: white;
    margin:  0 auto;
    width: 80%;
    text-transform: uppercase;
}

.title h1 {
    font-size: 2.7rem;
    font-weight: 700;
    margin:  0 auto;
    width: 80%;
    margin-bottom: 1.5%;
}

.title p {
    font-size: .60rem;
    width: 33%;
    margin:  0 auto;
    line-height: 1.8;  
}

Is it even possible to create a hero banner with css only? cuz i can't see any tutorial for that..

Answer 1

Example: Responsive Hero Banner with Image and Text

Here's a very minimal example of a full width, responsive hero banner with image and text, using only css.

The HTML:

<div class="hero-wrapper">
  <header class="hero">
    <div class="hero-sizing"></div>
    <div class="hero-content">
      <h1>Hero Title</h1>
      <p>Hero paragraph text.</p>
    </div>
  </header>
</div>

The only unusual element there is the "hero-sizing" div. It's there to ensure the banners image maintains its aspect ratio at different window size (more on "hero-sizing" later).

On to the css. First is the outermost hero-wrapper class:

.hero-wrapper {
  clear: both;
  position: relative;
  width: 100%;
  text-align: center;
  font: 18px helvetica, sans-serif;
  color: white;
}

Nothing too confusing here, mostly just setting up some formatting. Note that width: 100% makes the banner extend the full width of the window.

Next is the hero class, which specifies the banner image and how it is displayed:

.hero {
  background-image: url(http://lorempixel.com/image_output/people-q-c-1200-400-6.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: 100% auto;
}

This hero class specifies the image, centers it, and sets it to the full width of its container.

Next comes the hero-sizing class that's responsible for maintaining the banner's aspect ratio when it's resized:

.hero-sizing {
  padding-top: 33%;
}

To maintain the image's aspect ratio, padding-top must match the image's height:width ratio. Since the image in this example is 1200 wide by 400 high, we've set padding-top to 33%. hero-sizing serves an important function -- it stretches and shrinks the height of div containing the background image, so the div's aspect ratio and the image's aspect ratio always match.

With just the above css, we now have a full-width, responsive banner image that maintains its aspect ratio, but we still would like to be able to add some text to the banner and have it look decent. That's what the hero-content class and 'hero-content:before pseudo-class are for:

.hero-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-content:before {
  content: ' ';
  display: block;
  height: 40%;
}

Our content ought to be placed at roughly the same spot over the image, regardless of the image's size. To accomplish this, we're employing a little trick with :before pseudo-class to push our content down the page by 40% of the banner's current height. This positioning 'trick' means our content's position is responsive, as it will stay at the same place over the image.

The final css just sets some formatting preferences:

.hero-content h1,
.hero-content p {
  margin-top: 0px;
  margin-bottom: 6px;
}

And we're done.

Granted, this is just a bare minimum example which could be improved for small screens with @media queries (like reducing the font size), but this example shows how to implement two very useful capabilities:

1. full width, responsive hero banner images that maintain aspect ratio
2. consistent content positioning over the image

.hero-wrapper {
  clear: both;
  position: relative;
  width: 100%;
  text-align: center;
  font: 18px helvetica, sans-serif;
  color: white;
}

.hero {
  background-image: url(https://picsum.photos/id/1062/1200/400);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: 100% auto;
}

.hero-sizing {
  padding-top: 33%;
}

.hero-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-content:before {
  content: ' ';
  display: block;
  height: 40%;
}

.hero-content h1,
.hero-content p {
  margin-top: 0px;
  margin-bottom: 6px;
}

body {
  margin: 0;
  background-color: #d0d0d0;
}

<div class="hero-wrapper">
  <header class="hero">
    <div class="hero-sizing"></div>
    <div class="hero-content">
      <h1>Hero Title</h1>
      <p>Hero paragraph text.</p>
    </div>
  </header>
</div>