Problem
I want to use CSS to make the background image fill up the whole window, like the stretch effect you for wallpapers in windows. How do i do this?
Solution
Use the CSS3 background-size property, and set the value to cover. Note, however, that this property is not supported by all browsers. If you need to fill the entire window in all browsers, center the image and using the background-color to fill in the edges. Alternatively, create an image with a repeating pattern that tiles seamlessly regardless of the size of the window.
Detailed explanation
Using the CSS3 background-size property
CSS3 introduces a new property called
background-size, which allows you to scale a background image.
The property accepts the following values:
Size, expressed as physical measurements (e.g.,
px) or percentages. If two values are given, the first controls the width, the second controls the height. If only one value is given, it controls only the width, and the image's original height is preserved.
One of the following keywords:
contain,
cover.
The default value is
auto, which displays the image at its original size.
The keywords
contain and
cover preserve the image's proportions (aspect ratio) and scale it to fit the element. The difference between the two keywords is that
contain is meant to scale the image to the largest size to fit the background, whereas
cover should scale it to the smallest size needed.
In practice, the difference between
contain and
cover is more subtle. If both dimensions of the background image are larger than the element you're applying it to, you can use either. However, if the background image is smaller than the element, you need to use
cover. Otherwise, the image won't fill both the width and height of the element.
This means that you need to use
cover for the image to fill the entire background of a web page, with a style rule like this:
body {
background-image:url(images/my_background.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
When stretching a background image with
background-size, you need to use an image that is large enough to scale without pixelating.
Support for background-size
The background-size property is new to CSS3, and is not supported by all browsers. The minimum versions required for
background-size are as follows (source:
http://www.quirksmode.org/css/background.html):
- Internet Explorer 9
- Firefox 4
- Safari 5
- Chrome 4
- Opera 10.53
Other ways of filling the body background
Using
background-size is not always the best strategy. The image can look awful if overstretched; and the need to use a large enough image can bloat the page size, slowing down the display, and increasing the use of bandwidth. Consider instead centering a background image and using a
harmonious color to fill in around the edges. Alternatively, create an image with a repeating pattern that can be tiled automatically by CSS.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
