- English
Categories
Calendar
Recently...
Dynamic backgrounds with background-size: cover
simonmadine | 16 March, 2012 09:00
This is a two-part article. The second part will be covered in a future post.
There are some fantastic styles available now in CSS3. Apart from anything else, border-radius and box-shadow alone are the greatest tools to be added to the web developer's toolbox since float:left. Alongside these highly important and commonly used attributes, there are also some new values for existing rules like background-size:cover.
When we started developing the City pages, The large header image lent itself perfectly to using background cover. What this attribute does is tell the browser to scale the background image proportionally so that it is always at least covers the entire area. This usually means that in one dimension (horizontal, for example), the left edge of the image will be at the left edge of the box and the right will be at the right. The top and bottom of the image will most likely disappear off the top and bottom of the area as it is scaled up:
-
Example:
-
What it should look like:
div {
width: 180px;
height: 100px;
background-size: cover;
}
However, if the box were to be narrower, the cropped bits would come back:
-
Example:
-
What it should look like:
div {
width: 100px;
height: 100px;
background-size: cover;
}
Narrower still and the left and right would disappear while the top and bottom remained:
-
Example:
-
What it should look like:
div {
width: 75px;
height: 100px;
background-size: cover;
}
The opposite of background-size: cover is background-size: contain. This makes the 'longest' edge stay inside the box meaning that nothing is clipped:
-
Example:
-
What it should look like:
div {
width: 75px;
height: 100px;
background-size: contain;
}
Fallback
Obviously, when you're using new features of CSS3, you've got to make sure browsers which don't support those features don't end up being ignored. In most cases, little touches like a subtle border-radius won't degrade the experience but for larger effects like the behaviour of our main header image, we drop in some JS-powered alternatives.
If the browser doesn't support background-size:cover, we create a new image element, set its src attribute to the same as the normal background-image url and insert it into the document. By setting its width to be 100%, it will scale correctly, pretty much matching the original intended behaviour.
This can be accomplished various ways but you can do it simply with jQuery along these lines:
if ($.browser.msie && $.browser.version < 10) {
var $backgroundReplacement = $('<img class="background-replacement" />'),
$header = $('div.header'),
imgURL = $header.css('background-image');
$header.css('background-image', 'none');
imgURL = imgURL.substring(5, imgURL.length - 2);
$backgroundReplacement.attr('src', imgURL);
$header.append($backgroundReplacement);
}
While the CSS is like this:
.background-replacement {
width: 100%;
display: block;
position: absolute;
min-width: 1280px;
min-height: 390px;
}
Where min-width and min-height are the dimensions of your container. Handily, there's a jQuery plugin which can also do this for you: jQuery Anystretch.
Of course, once you start scaling images up, things can start to get a little messy. Having a low-resolution image stretched across your page can end up looking quite bad so the second part of this article will cover a technique you can use to get around this.
Web
|
Next |
Previous |
Comments (0) |
Trackbacks (0)
Comments
You must login to post comments.
Login
