CODEWITHSUNDEEP
css
Solidariti
Solidariti

Reputation: 475

CSS positioning of background image

html { 
    background: #9c9c9c url(../images/bg-bottom.jpg) center top;
}
body {
    border-top:2px solid #fecd2a;
    background:#9c9c9c url(../images/bg.jpg) repeat-x center bottom;
}

I need bg.jpg which is the large background with the black gradiantat the top, to be at the top and for the bg-bottom.jpg to be repeated at the bottom. How come this doesn't work, is there and easier way? Apart from creating one long image.

http://fluroltd.com/clients/harveys/latest-news/

Upvotes: 2

Views: 365

Answers (2)

derekerdmann
derekerdmann

Reputation: 18252

Looks like you need to switch around your positioning and use a transparent background for the body tag:

html {  
    background: #9c9c9c url(../images/bg-bottom.jpg) center bottom 
} 

body { 
    border-top:2px solid #fecd2a; 
    background: transparent url(../images/bg.jpg) repeat-x center top; 
}

Upvotes: 1

Squirkle
Squirkle

Reputation: 933

Your CSS on the body should be

background: url("../images/bg.jpg") repeat-x scroll #9C9C9C;

I don't think adding a background to your HTML tag is going to get you anywhere. If I were you I would just make one super long, narrow-width image that will not possibly be exceeded by the length of your page. You can't have multiple BGs without using CSS3, which I personally wouldn't recommend.

Upvotes: 0

Related Questions