harryd Posted January 19, 2009 Report Share Posted January 19, 2009 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 19, 2009 Report Share Posted January 19, 2009 Have you tried putting it in the body or #wrapper styles? body { background: url(gradient.jpg) repeat; } Quote Link to comment Share on other sites More sharing options...
harryd Posted January 19, 2009 Author Report Share Posted January 19, 2009 Thanks Wickham. I will try and let you know. Quote Link to comment Share on other sites More sharing options...
JBall Posted January 20, 2009 Report Share Posted January 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
harryd Posted January 20, 2009 Author Report Share Posted January 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
JBall Posted January 20, 2009 Report Share Posted January 20, 2009 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; } Quote Link to comment Share on other sites More sharing options...
harryd Posted January 20, 2009 Author Report Share Posted January 20, 2009 Thanks JBall!! If I have background image do I need color to? Thanks again for your time. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 20, 2009 Report Share Posted January 20, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
harryd Posted January 20, 2009 Author Report Share Posted January 20, 2009 (edited) Wickham & JBall thanks a lot for sharing your knowledge. Edited January 20, 2009 by harryd Quote Link to comment Share on other sites More sharing options...
harryd Posted January 22, 2009 Author Report Share Posted January 22, 2009 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 Quote Link to comment Share on other sites More sharing options...
JBall Posted January 22, 2009 Report Share Posted January 22, 2009 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?) Quote Link to comment Share on other sites More sharing options...
harryd Posted January 22, 2009 Author Report Share Posted January 22, 2009 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! Quote Link to comment Share on other sites More sharing options...
JBall Posted January 22, 2009 Report Share Posted January 22, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.