Full width header responsive image, with left & right overflow

[tomascrespo]

I want to place a full width image (somethink like a header or slider) but I want to show only the center of the image, UNLESS the viewport would be so big than the image had to be enlarged.

Some detailed examples:

My image is 2000x200px
* In a screen of 1600px width I want to show the central 1600px of my image, no resize.
* In a screen of 450px I want to show the central 1600px of my image, but shrink (resized-down)
* In a screen of 1900px I want to show the central 1900px of my image, no resize.
* In a screen of 2500px I want to show the full width 2000px of my image, of course, enlarged.

What I have so far:

• Make a responsive image is quite easy

#header-img {
  width: 100%;
  height: auto;
}

But it always shows the full image. There are a left and a right chunk I don’t want to show unless the resolution of the client screen would be really big.

• On the other hand, get the “overflow” behaviour could be done setting the image as background of a div, and setting his background-size property to cover, but it’s not responsive.

<div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />

I need the two behaviours. Perhaps I need media-queries, but I’m trying to avoid it. I don’t want any javascript code neither, only CSS.

I have seen this behaviour in some pages, but I can’t find any at the moment.

A picture speaks a thousand words

Observe that numbers 7 and 8 are only showed in ultra wide screen

[Beverleyh]

I’m currently on mobile so excuse the lack of code examples…

Re: your background-size:cover; height:200px; problem…

Instead of setting an explicit height, try padding-bottom set as a percentage. This will give the div relative height that will scale with a changing (responsive) container width.

The calculation for the paddings-bottom % value;

image height in pixels / image width in pixels x 100

You’ll still probably need to use a few media queries to tweak the size/behaviour at critical breakpoints (when the image looks iffy) but it will give you something else to add to your RWD arsenal :)

BTW, have you heard of using stacked media queries to server smaller background-images to mobile and bigger ones to desktop? It can help with page weight at small screen sizes. Plus you can manipulate the breakpoints to resize heavily compressed/optimised images down to double-pixel density for retina screens. Crispy sharp and lightweight – mmmmm, my fave! The padding-bottom, stacked MQ and retina image techniques are all briefly covered here http://www.dynamicdrive.com/forums/entry.php?315-RWD-Cross-Fade-Slideshow-with-Retina-Images – ignore the slideshow, but the other stuff seems quite fitting to your needs.

[tomascrespo]

The padding-bottom: % solution is not bad, but it’s not enough. I will try with some media-queries.

However the link you gave me is quite interesting. I think I will go with that.

Lot of thanks

[kwerty]

Hi,

This is just a demo, in case this is what you are looking for. Set the parameters according to your needs.

http://codepen.io/anon/pen/EjzqEd

Thanks.

[helmuc]

@kwerty thank you – works as a charm.

all the best,
H

[drupopuppis]

@kwerty Fast and effective, many thanks.

[josh]

@helmuc, I just want to second the use of padding-bottom and a percentage as suggested by @Beverleyh. It’s the best way to handle responsive images.

[Author]

Posts