Home/ Questions/Q 8725591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T08:04:23+00:00

How do I use CSS to repeat a first background image both vertically and

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0