Background repeat

Forum Moderators: not2easy

Message Too Old, No Replies

Background repeat

Repeat in whole amounts

Adam5000

5:22 pm on Nov 23, 2011 (gmt 0)

Greetings all

I'm making a web page with a background and using the code

background-image: url('images/background_text.jpg');

And what I'd like to do is repeat the background vertically in whole amounts like repeat once or repeat twice or repeat twelve times and so on.

Help!

alt131

11:32 am on Nov 25, 2011 (gmt 0)

Hi Adam, unfortunately it isn't currently possible to specify the number of repetitions in the way you want, but you can simulate the effect by setting the required lengths on 3.9 background-size. [w3.org]

lucy24

1:50 pm on Nov 25, 2011 (gmt 0)

I got the impression "round" is what he wanted. The exact number doesn't matter, so long as it works out to an integer.

(Where do you find this stuff? I can never find anything at w3c unless I've already got the link :()

But I've got a nasty suspicion that rounding off the size will come out much nicer in some browsers than others. Maybe OK if it's something blurry, or if you're promoting a carnival.

enigma1

7:07 pm on Nov 25, 2011 (gmt 0)

You could define a separate style for each of the different number of repetitions, then use a self container with new style that will be the background for each case. Should be compatible with all browsers. The height of the container will be effectively the number of times the image repeats vertically.

birdbrain

10:03 pm on Nov 25, 2011 (gmt 0)

Hi there Adam5000,

your requirement, can be achieved with CSS3 in modern browsers...

IE9, Firefox 5+, Chrome 12+, Safari 3.2+, Opera 10.6+

Here is a basic example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.webmasterworld.com/gfx/">
<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>

<style type="text/css">
body {
 background-image:url(logo.png), url(logo.png), 
url(logo.png), url(logo.png), url(logo.png);
 background-repeat:no-repeat;
 background-position:center 0, center 56px, 
center 112px, center 168px, center 224px;
 }
</style>

</head>
<body>

<div></div>

</body>
</html>

birdbrain

[edited by: alt131 at 2:21 pm (utc) on Nov 26, 2011]
[edit reason] Side Scroll [/edit]

lucy24

11:01 pm on Nov 25, 2011 (gmt 0)

I thought we were talking about this part ("step one" deals with size):

round
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.

and

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.

I used to know a mathematician who got absolutely livid over the term "natural number", but never mind that.

enigma1

2:20 pm on Nov 26, 2011 (gmt 0)

I am not sure if the OP meant resizing of the background image or just repetitions and resizing the container. That's another point of view. It's subject to the particular implementation I would think.

alt131

3:39 pm on Nov 26, 2011 (gmt 0)

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.

For example, background-repeat: no-repeat round; should mean no horizontal repetition, with a rounded vertical tile. But modern ff repeats and rounds both axis, Op tiles and rounds horizontally (not vertically), and winSafari just produces a single squished background-image. I'm not seeing too many problems with the default rounding produced by background-repeat, but background-size definitely produces the predictable inconsistencies.

quirksmode has some examples of the css3 background properties [quirksmode.org]. It's older and uses proprietary extensions, but you get the idea - although my mileage on this hasn't been great - has anyone had a better experience?

Adam can you clarify exactly what you are wanting to achieve - as enigma said how to do this will be influenced by your implementation, including the browser versions you are supporting - it would be nice to avoid using additional elements or calls for multiple images just to achieve the effect.

(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 number

Ok, I'll bite - what did the natural numbers do to deserve that?

lucy24

12:38 am on Nov 27, 2011 (gmt 0)

what did the natural numbers do to deserve that?

I think he just meant that mathematically there ain't no such thing. Or possibly he was referring to "counting number". Maybe you're supposed to say "positive (non-zero?) integer". See post elsewhere about shortness of memory.

But seriously... Is "round" one of those CSS3 properties that you have to put in threes, like "round blahblah; -webkit-round blahblah; -moz-round blahblah" ? Just last night I couldn't figure out why columns weren't working when I distinctly remembered having used them in the exact same way before. After digging up the code that worked, I went back and added in the -moz- and -webkit- versions.

I also discovered that in one of those versions, "column-width" and "column-count" had to be separately declared, not collapsed into a single "columns". This may be relevant to background properties as well.

alt131

6:00 am on Nov 27, 2011 (gmt 0)

I think he just meant that mathematically there ain't no such thing

I knew I avoided the maths department
for a reason ;)

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.

The MDN background-repeat [developer.mozilla.org] claims space|round have some support. Safari docs say nothing, Opera claims full support in the more modern presto engines and ie claims support since ie9 (I can't test). But frankly, I'm seeing results much more consistent with the incomplete/incorrect implementation reported by quirksmode. And after digging, am now wondering if the vendor/proprietary extensions used for the quirksmode tests ever existed given I can now only find them for background-size, not background-repeat.

Oh what fun!