css colors - begginer

[harryd]

I am working on my first project that started as a school assignment.

 

I was reading the old posts and I could not find the answer.

 

I can't figure out how to add Gradiant image background outside the header, navigation etc.

 

Here is a portion of my css style

 

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

#wrapper {

margin: 0 auto;

width: 922px;

}

#header {

color: #333;

width: 900px;

float: left;

padding: 10px;

border: 1px solid #ccc;

height: 70px;

margin: 10px 0px 0px 0px;

background: #FFFFFF;

}

 

Thanks

Harry

[Wickham]

Have you tried putting it in the body or #wrapper styles?

 

body { background: url(gradient.jpg) repeat; }

[harryd]

Thanks Wickham.

I will try and let you know.

[JBall]

When you create the image you are going to use it only needs to be a couple of px wide. And set the body background-color to the color on the bottom of your gradient. This way the image only needs to be as tall as the gradients upper portion.

[harryd]

Thanks JBall I am choosing gradient color. Do you have a sample with the size of the pix.

Thanks to Wickham I added the color.

[JBall]

In this example the gradient image (I used Photoshop) is 5px wide and 210px tall. With black on top and green (#3d733b) on bottom.

 

 

 

So in your CSS the body rule might look like this:

 

body {
   background-image:url(images/body_gradient.gif);
   background-color: #3d733b;
   background-repeat:repeat-x;
}

[harryd]

Thanks JBall!!

If I have background image do I need color to?

Thanks again for your time.

[Wickham]

You need the background-color as well as the gradient background-image so that if the page is longer than the gradient image (for instance if someone increases text size and it needs more height) the page doesn't just stop and show white.

 

body { background: url(gradient.jpg) repeat-x #2df68c; }

 

make the background-color the same as the bottom of the gradient so they merge.

 

Like JBall's code or mine above which is a shorter version in one style instead of three separate styles. Note that it starts with background: not background-image:

Edited January 20, 2009 by Wickham

[harryd]

Wickham & JBall

 

thanks a lot for sharing your knowledge.

Edited January 20, 2009 by harryd

[harryd]

In this example the gradient image (I used Photoshop) is 5px wide and 210px tall. With black on top and green (#3d733b) on bottom.

 

 

 

So in your CSS the body rule might look like this:

 

body {
   background-image:url(images/body_gradient.gif);
   background-color: #3d733b;
   background-repeat:repeat-x;
}

 

It looks great.

I have one more question from your example. What would I need to do to have black on the bottom and the footer can match the gradient.

 

Thanks

[JBall]

You mean that you want the footer to have the same gradient as the BG?

 

What program are you using to edit images with? (Photoshop, Illustrator, Gimp?)

[harryd]

Same as BG.

the sample you show is top black bottom green. If I would like to try black green black with the footer matching BG.

 

Photoshop.

 

Thanks JBall!

[JBall]

OK.

 

In Photoshop just create a new document that is 5px wide and however tall you want it. Then use the gradient tool (might be hiding under the paintbucket) to create your gradient.

 

If you need help with that part THIS tutorial might be useful.

 

Do the same for your footer image. Either make one wide image or a narrow image that is the right height for your footer.

 

This CSS code is written with the assumption of a narrow image set to repeat for the footer. If you choose one wide image just remove "background-repeat:repeat-x;" from the #footer rules.

 

As a note: Be sure to set a height and width for your footer.

 

body {
   background-image:url(images/body_gradient.gif);
   background-color: #000000;
   background-repeat:repeat-x;
}

#footer {    
   height: 40px;
   width: 800px;
   background-image:url(images/footer.jpg);
   background-color: #000000;
   background-repeat:repeat-x;
}

Edited January 22, 2009 by JBall