View Full Version : How to create gradient background that exetends to auto margins

12-04-2009, 08:59 PM
Great, very informative site. 1st Post.

I am aware of how to center content using CSS with the following code:
body {
text-align : center ;
min-width : 770px ;
div.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
Or variations of the above. What I would like to do is to add a gradient background, similar to what is seen in this template:


I looked at the code, but I was not able to determine how it is done. I would like to create a page with a similar gradient, using different colors

I am new to CSS, but the advice of everyone on these forums I am doing my best to learn.

Thanks so much in advance!

12-05-2009, 12:25 AM
the templare you reference uses this
html, body
font-family: Arial, Helvetica, sans-serif;
background: #fff url(../images/bg.jpg) top repeat-x;
ii uses a gradient as a background image and repeats it along the x axis. if you look at images/bg.jpg), you will see the image that it uses

12-08-2009, 09:30 PM
Wow I totally should have seen that. :roll:

Thanks for your reply!

12-09-2009, 04:31 PM
Get the Firebug add-on for Firefox, it makes it a breeze to see what CSS is used for different parts of a page.

12-12-2009, 02:28 AM
OMG, Firebug is freaking awesome..!