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..

Could you put this in a https://jsfiddle.net/ with your image? — Marcel, Feb 20 '16 at 23:02
The common pattern for background image usage is assigning the image to the baground of the wrapping container .main-header in your example. Then the text will be infront of the background image even without positioning it absolute. — noa-dev, Feb 20 '16 at 23:07
I don't fully understand what you want to achieve. Is it the image that doesn't work? the text that doesn't? both? It would be easier if you could provide an example of what the target result would be as long as a demo of how it looks right now (check how to create a [mcve]). — Alvaro Montoro, Feb 20 '16 at 23:34
It is the image on top that doesn't work... if i zoom in or resize down the browser they go out of the image — shean, Feb 20 '16 at 23:46

terrymorse · Accepted Answer · 2021-02-12T00:42:42.400

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:

full width, responsive hero banner images that maintain aspect ratio
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>

@shean If you're still looking for examples of pure css responsive hero banners, there's one at codepen.io that's [easy to follow](http://codepen.io/dpvisuals/pen/rnIys). — terrymorse, Feb 22 '16 at 18:09
@shean So it seems you're looking for a responsive hero banner that uses pure css. I'll show you that in my answer above, step by step. — terrymorse, Feb 23 '16 at 14:57
@shean OK, see my revised answer. It's a bare minimum example that shows how to make the image and the content positioning responsive. — terrymorse, Feb 23 '16 at 19:32
@shean Did you see my revised answer? It shows how to make the hero banner image and text positioning responsive. If you have any questions, please ask. — terrymorse, Feb 26 '16 at 16:00
i'm sorry for the very late response and thank you for your answer it's quite helpful — shean, Mar 14 '16 at 23:27

Header banner with css only?

1 Answers1