Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: not2easy
IE9, Firefox 5+, Chrome 12+, Safari 3.2+, Opera 10.6+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS3 multiple background images</title>
url(logo.png), url(logo.png), url(logo.png);
background-position:center 0, center 56px,
center 112px, center 168px, center 224px;
[edited by: alt131 at 2:21 pm (utc) on Nov 26, 2011]
[edit reason] Side Scroll [/edit]
The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does. See the formula under "background-size". If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.
If "background-repeat" is "round" for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the background positioning area. In the case of the width (height is analogous):
If X ≠ 0 is the width of the image after step one and W is the width of the background positioning area, then the rounded width X' = W / round(W / X) where round() is a function that returns the nearest natural number (integer greater than zero).
If "background-repeat" is "round" for one dimension only and if "background-size" is "auto" for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.
The exact number doesn't matter, so long as it works out to an integer.Good point Lucy - background-repeat:round is definitely more appropriate if there is no desire to control the number of repetitions. That said, it isn't that well supported and versions that do support the round property don't seem to understand the use of two keywords to order different horizontal and vertical tiling.
(Where do you find this stuff? I can never find anything at w3c unless I've already got the link )Second that. I don't like the new navigation system at all, and it irritates me enormously as I think w3 should be the very first "go-to" for all things css. These days I start at the css homepage [w3.org], plus I've complied most of the modules into a .chm. I think reading the specs regularly helps - don't always see the potential at the time, but sometimes you remember something useful ;)
a mathematician who got absolutely livid over the term "natural numberOk, I'll bite - what did the natural numbers do to deserve that?
what did the natural numbers do to deserve that?
I think he just meant that mathematically there ain't no such thingI knew I avoided the maths department
Is "round" one of those CSS3 properties that you have to put in threes,Just to clarify, round isn't a property, but a new value added to background-repeat by css3. The other value added is space which "spaces" the background-image out to fill an area without clipping the image - rather than "rounding" the image size to achieve the same. I haven't been able to find any vendor/proprietary extensions dealing with background-repeat, although they do exist for background-size. The lack of vendor interest probably explains the patchy support.