How to repeat multiple images over one element using CSS

Question

How do I use CSS to repeat a first background image both vertically and horizontally, and repeat a second background image just horizontally? I wish it not to be dependent upon CSS3.

I tried the following, but no success.

body {
    font-family:Verdana, Geneva, sans-serif;
    position:relative;
    z-index:1;
}
body:before,
body:after {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
body:after {
    background-image:url('../images/bg.png');
    background-repeat:repeat;
}
body:before {
    background-image:url('../images/top-bg.png');
    background-repeat:repeat-x;
}

Care to elaborate? Not following what you need, what context it's in or what you've tried. — Rick Calder, Oct 19 '12 at 14:41
with css you can only repeat a background-image, not an image. If you want to repeat the background-image do the easy thing and google for 'css background-repeat'. The definition is straight forward and doesn't leave questions open. — Sven Bieder, Oct 19 '12 at 14:42
Do you mean multiple background images? These are only supported by CSS3, so not all browsers. See http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css — mtmacdonald, Oct 19 '12 at 14:42
Sorry, meant background-image, not an image. Problem is I wish to repeat two separate images, one just horizontally and one both horizontally and vertically. — user1032531, Oct 19 '12 at 14:45
@MMacdonald. Exactly! So it is only possible with CSS3? Any workarounds for other browsers? — user1032531, Oct 19 '12 at 14:46
workaround for other browsers is using two nested container each one with a background-image. The background-image you want on top should be the background-image of the inner container. — Sven Bieder, Oct 19 '12 at 14:49
Thanks Sven. I was thinking that might be the solution, but didn't know if there was anything better. Post it and I will select it as the answer (provided it works!) — user1032531, Oct 19 '12 at 14:52

score 0 · Answer 1 · answered Oct 19 '12 at 14:42

0

mydiv
{
background-image:url('myimage.jpg');
background-repeat:repeat;
}

...will do across both axes

mydiv
{
background-image:url('myimage.jpg');
background-repeat:repeat-x;
}

...will do horizontally.

I'm assuming this is what you're after, your question isn't overly specific, can you state more clearly what you're trying to achieve?

answered Oct 19 '12 at 14:42

MickMalone1983

1,054
8
17

Thanks Lante. Almost, but I wish to do both at the same time, and use a different image for each. – user1032531 Oct 19 '12 at 14:47

mtmacdonald · Accepted Answer · 2012-10-22T12:58:47.123

Have a look at CSS3 multiple backgrounds. Supported since Firefox 3.6, Safari 1.3, Chrome 10, Opera 10.50 and Internet Explorer 9.0.

If you must support IE8 or earlier (noting that Google drop support for IE8 from next month), either combine the images into 1, or overlay multiple elements.

<!doctype html>
<html>
 <head>
    <style type="text/css">
    #tile, #logo { 
       padding:0; 
       margin:0; 
       border:0; 
       position:absolute; 
       top:0; 
       left:0; 
       right:0; 
       bottom:0;
    }
    #tile{ 
       background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/e7/Procedural_Texture.jpg'); 
       background-repeat:repeat;
    }
    #logo{ 
       background-image:url('http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png'); 
       background-repeat:repeat-x;
    }
    </style>
 </head>
 <body>
<div id="tile"></div>
<div id="logo"></div>
 </body>
</html>

This may be one of various solutions available.

Thanks MMacdonald! Tried the multiple element solution, but no success. I edited my original post to show what I did. — user1032531, Oct 19 '12 at 15:11
Posting a complete self-contained code sample is clearer. I edited my answer to suggest one solution. — mtmacdonald, Oct 22 '12 at 12:59

How to repeat multiple images over one element using CSS

2 Answers2