Responsive hero image with text overlay?

[mikes02]

I am struggling to come up with an ideal solution to handle a responsive hero image with vertically centered text overlay. I tried using the padding-bottom method for responsive images but that doesn’t seem to work with the text overlay. Does anyone have any tested methods that work well? Should the image be an inline image or CSS background image?

    <section class="hero">
    <img src="images/hero.jpg" alt="" />
    <div>
        &lt;h1&gt;Faithful &amp; True Tattoo Studio&lt;/h1&gt;
        We are a custom tattoo &amp; art studio located at the Iron Bird Lofts in the Cultural Arts District of Downtown Fresno.
    </div>      
&lt;/section&gt;

[mikes02]

I tried with the code below but the vertical centering only seems to work with a fixed height…

HTML

            <section class="hero">
            <section class="container">
                <h1>Faithful & True Tattoo Studio</h1>
                We are a custom tattoo & art studio located at the Iron Bird Lofts in the Cultural Arts District of Downtown Fresno.
                <a href="">See Our Work</a>
            </section>
        </section>

CSS
.hero {
background: url('images/hero.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: table;
width: 100%;
}
.hero .container {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 689px
}

[Paulie_D]

A Codepen example of your specific design would be really helpful but this might get you started.

http://codepen.io/Paulie-D/pen/fnIxt/

Note: CSS3 Transforms required.

[paulob]

Hi,

Here’s another idea using display:table to vertically centre the text over a responsive type image.

http://cdpn.io/Jphtq

Not sure if its quite what you are after though.

[GroovyMotion]

Wow this is a great thread! I played around with @Paulie_D pen and added media-queries: http://codepen.io/GroovyMotion/pen/wFpEa

@paulob this is another great example! :)

Are rem’s better for responsive or it’s just for specific layouts such as this one?

[paulob]

Are rem’s better for responsive or it’s just for specific layouts such as this one?

Rems are just another tool in the toolbox. :)

Rems are great for consistent measurements throughout the page and avoid the compounding issues of em measurements.

It does all depends on the layout in hand though as you may want to build your page so that each element has a relationship with the parent element rather than the root element.

If for example you decide a section needs a change of size with ems you could just change the parent’s size and all the children will scale with that parent (assuming ems had been used for all children) and maintain the correct relationship with the parent’s size. However if you had used rems and you changed the parent’s size then only the parent changes its size but now all the children may be too big or small because they still refer to the viewport.

As usual with CSS there is no one right way to do something because it does depend on the job in hand.

[GroovyMotion]

Ok I see. I do have issues with resizing but it’s not parents and child it’s mostly an H1 and a nav that needs to be much smaller instead of just reducing the font-size %.

Indeed this is what I like in CSS there are so many ways to accomplish something! :)

Cheers!

[mikes02]

Some good examples here, at some point though it feels like the text should drop down below the image otherwise it may not work or the image becomes too small behind the text. It’s been tough finding solid examples of this online, there’s a lot of methods for doing responsive background images with padding-bottom as a percentage for example, but doing a responsive hero image with centered text that then drops below the image seem hard to come by.

[paulob]

, at some point though it feels like the text should drop down below the image otherwise it may not work or the image becomes too small behind the text.

Yes that will be an issue whatever you do as it will depend on the amount of text you have. In my example above I allowed the text to produce a scrollbar so that it was still readable if this happened.

[Author]

Posts