Question

I’m working an a small website example and I want a resizable background for a div but can’t seem to get the bottom background to work.

my CSS:

.content {
    padding: 10px 0;
    height: 100%;
    background-image: url(bodytop.png), url(body.png), url(bodybot.png);
    background-size: 100%;
    background-repeat: repeat-x, repeat-y, repeat;
}

How can I get this to work? The bodybot.png won’t show up for me. Could i do this by creating a new div in my HTML? I want bodytop.png on the top, body.png resizing in the middle, and bodybot.png on the bottom. Thanks.

Answer 1

This is how you should do it….

Check the revised FIDDLE

CSS

 .container{
background: url(http://i.imgur.com/AFh3Y.png) bottom left repeat-x, url(http://i.imgur.com/kiCmk.png) top left no-repeat , url(http://i.imgur.com/3qKoZ.png) left repeat-y ;
width:960px; display:block;
}

.content {
padding: 10px 0;
}