How to repeat multiple images over one element using CSS


Tags: css

Problem :

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


Solution :

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.


    CSS Howto..

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    How do I show specific images from a get_children array in WordPress

    Chrome (webkit?) not displaying images correctly in a slideshow

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    How do I format an angular drop down menu?

    How can I keep percentage-based elements from overlapping?

    How to display line items in twos?

    how to style xml tag attribute with css

    bootstrap navbar how to give it a max width

    CSS: How to create buttons with reflected shine similar to iOS icons?

    How to make display:flex work for responsiveness - Bootstrap?

    How do I optimize a very loooong page with TONS of images on it?

    How to control layering in HTML/CSS without making links nonfunctioning?

    How can I add categories-authors-members area for commenting on my website? [closed]

    How to get the header and navbar on top?

    How can i make infinite flowing background with only CSS?

    How simple CSS breadcrumbs work

    How to change text from black to white upon hover on background black?

    How to attach user CSS to Microsoft Edge?

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How do I create a navigation system like that of Lowes.com [closed]

    how to number questions using class in CSS

    How can i make 3 independently scrollable columns

    How to add padding space in /div container via CSS?

    How to create mirrored image effect with CSS single element

    How to run multiple css selector classes at once?

    How To Turn JS Objects To HTML And Style With CSS

    How do I make a horizontal sitemap using UL?

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    How do I do the exact opposite [closed]