Page 1 of 1

CSS Background Repeat at top

Posted: Wed May 23, 2007 12:46 pm
by icesolid
I was just wondering how to make a background image repeat at the top of the site only.

Like the yellow gradient used at the top of http://www.cnet.com.

Posted: Wed May 23, 2007 1:53 pm
by toasty2
They probably just set the width to 100%. Its being stretched out..but you don't notice because its pixels never change as they go horizontally.

Posted: Wed May 23, 2007 1:58 pm
by aaronhall

Code: Select all

background:url('gradient-image.png') repeat-x;
in the body or wrapper div. The image will be repeated rather than stretched.

Posted: Wed May 23, 2007 3:33 pm
by icesolid
I found this piece of code to work perfectly as needed.

Code: Select all

body { 
   background-image: url("images/fixed_bg.gif");
   background-position: top;
   background-repeat: repeat-x;
   background-attachment: fixed;
}

Posted: Thu May 24, 2007 7:16 am
by feyd
Quotes are not needed.

Posted: Thu May 24, 2007 12:10 pm
by nickvd
icesolid wrote:I found this piece of code to work perfectly as needed.

Code: Select all

body { 
   background-image: url("images/fixed_bg.gif");
   background-position: top;
   background-repeat: repeat-x;
   background-attachment: fixed;
}
With the exception of the background-attachment property, what you just posted there will work identically to the code that aaronhall posted... :D