Q: Ever wonder that css can stretch a background image? So no matter what the monitor size the background image always stretches to meet the requirements?
A: There is no way to stretch or control the size of a background image using css. However, you could use the background, background-attachment and background-repeat porperties to achieve an alternative result…
Watch browser support for these though!
Well, CSS1 and CSS2 still can’t do the magic yet, but CSS3 can! Here’s how:-
The ‘background-size’ property
Is ‘background-stretch’ a better name?
Specifies the size of the background images. The section “Layering multiple background images” defines to which image of the ‘background-image’ property each of the comma-separated values applies.
If a comma-separated value has only one part (not counting the keyword ’round’), the second part is set to ‘auto’. Of the two parts, the first one refers to the width, the second to the height of the corresponding background image. The addition of the keyword ’round’ indicates that the width and height are approximate, as explained below. ’round’ on its own is equivalent to ‘auto auto round’.
The size of an image is established in two steps. The first step derives sizes as follows:
- auto
- The size that keeps the background image’s original aspect ratio. Additionally, if the other part of the value is also ‘auto’, the image has its intrinsic size.
- <length>
- A specific size.
- <percentage>
- The percentage is relative to the width or height of the area given by ‘background-origin’.
Negative values are not allowed. A size of zero is allowed, but causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)
If the given size is accompanied by the keyword ’round’, and the computed value of ‘background-repeat’ is repeat for the horizontal and/or vertical direction, there is a second step: The UA must reduce the width, resp., height so that the image fits a whole number of times in the background area. In the case of the width:
If X ≠ 0 is the width of the image (i.e., the specified length or percentage, or the intrinsic width if the ‘background-size’ is ‘auto’) and W is the width of the background area, then the rounded width X’ = W / ceil(W / X)
The height is analogous. ceil() is a function that returns its argument if it is a whole number, otherwise the next bigger whole number.
If the width is reduced because of this formula, the aspect ratio is not retained, not even if the height was specifed as ‘auto’ and the vertical repeat as ‘no-repeat’. Ditto if the height is reduced.
Should ’round’ be specified for width and height separately? It then becoems possible to round in one direction and keep the aspect ratio in the other. E.g., instead of allowing the keyword in ‘background-size’, it could be one of the possible values in ‘background-repeat’: [ repeat | space | no-repeat | round ]{1,2}.
Is ’round’ the right word? How about ‘~’ in front of the number, or ‘approx’ or ‘about’?
Is it better allow the size of the image to be rounded up as well as down?
Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:
div { background-image: url(plasma.png);background-size: 100%;background-origin: content}
The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:
p { background-image: url(tubes.png);background-size: 50% auto;background-origin: border}
This example forces the background image to be 15 by 15 pixels:
para { background-size: 15px;background-image: url(tile.png)}
This example uses the image’s intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.
body { background-size: auto;background-image: url(flower.png)}
The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.
p { background-image: url(chain.png);background-repeat: repeat-y;background-size: 20% 30% round; }
