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

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

• javascript
• jquery
• html
• css
• banner

• Could you put this in a jsfiddle with your image? – Marcel Commented Feb 20, 2016 at 23:02
• 1 The mon 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 Commented Feb 20, 2016 at 23:07
• When i put it as a background image it doesn't appear.. – shean Commented Feb 20, 2016 at 23:09
• 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 minimal reproducible example). – Alvaro Montoro Commented Feb 20, 2016 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 Commented Feb 20, 2016 at 23:46

1 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./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 es 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 acplish 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>