Jump to content

css colors - begginer


harryd

Recommended Posts

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

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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

 

96399732em7.jpg

 

 

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;
}

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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

 

96399732em7.jpg

 

 

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

Link to comment
Share on other sites

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 by JBall
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...