CSS Background Repeat at top

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

CSS Background Repeat at top

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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.
User avatar
aaronhall
DevNet Resident
Posts: 1040
Joined: Tue Aug 13, 2002 5:10 pm
Location: Back in Phoenix, missing the microbrews
Contact:

Post 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.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post 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;
}
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Quotes are not needed.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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
Post Reply