CODEWITHSUNDEEP
htmlcssresponsive-design
samrap
samrap

Reputation: 5673

CSS responsive header image

I have always been curious on whether I am doing this the right way or not, and I would like to settle that question now.

Often these days in front end development the landing page (and often others) require some sort of responsive header image that has text inside of it, maybe a button or two, whatever. Point is, the header becomes a container with a background image. Simple enough.

However, when developing responsively, you want this background image to scale, so you set background-size to 100%, cover, etc. depending on your needs. (Let's ignore the lack of support for IE8. Bootstrap announced dropping support for IE8 in the upcoming version 4 so that's my cue to finally move forward as well). Now we have a nice responsive background image that stretches to the size of the page while preserving the aspect ratio.

That's all good and well, but our header's height depends on the height of the background image, which depends on the width of the header.

Ok, so then to set the height of the header, we can use vw units, since the height of the header is dependent on its width, or more specifically, the width of the background image at any given time (assuming the header's width is 100% of the window). Assuming our background image is 1080x720, it becomes a simple equation: height-percent = 720/1080*100. The height of the header will now be exactly the height of the background image at any given time. The steps to get here may seem complicated but in reality we have a really simple fully-responsive header:

header {
    width: 100%;
    height: 66vw;
    background: url('bg.jpg') no-repeat;
    background-size: 100%;
}

It works flawlessly in theory, but there are a few known issues with viewport units, not to mention lack of support for IE8 entirely which I could care less about at this point. But for the sake of argument, let's include that as an issue with using this method of solving the height issue. We want a solution that won't keep us up at night, so we move on to solution #2:

Creating an absolute-positioned image inside the header container, make the image responsive with width: 100%; height: auto, and we are back where we started. Responsive header image, but we can't set the header container to height: auto because the image has absolute positioning, and our height is still dependent on the image. Not to mention, the image has absolute positioning, so once the view port becomes larger than the image, it won't scale any larger, since it's width: 100% property applies to itself (I think?). So two problems with the absolute position method, which makes it pretty much unusable.

Finally, we can break the 10 commandments of web design and use JavaScript to set the width and height dynamically. Not ideal, not pretty, but it will work and will be compatible across all browsers, at least the ones we still develop for.

But do we really need JavaScript for this? Should the first method using vw units suffice? That's where I am stumped.

So to wrap this up, I am wondering which solution is the most proper. Please note: I am not asking for your opinions but rather I am looking for "what is the proper way to do this. Period". This one has been a challenge for me and I could really use some answers :)

Upvotes: 1

Views: 530

Answers (1)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23409

If you're trying to support ancient browsers then JS is the proper (and only) way to achieve this.

Personally I like using jQuery. You can convert pixels to vh/vw like so:

$(window).height() * 0.98 // is equiv to 98vh
$(window).width() * 0.98 // is equiv to 98vw

Upvotes: 1

Related Questions