Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Coding for Gradient Color Background for all Platforms

Status
Not open for further replies.

garcosta

Technical User
Aug 20, 2015
5
US
Can anyone help me with correcting my coding for taking a gradient color background that goes from rust color at the top to black at the bottom in the vertical y direction that repeats in the x direction. I am using a jpg that is a little wider than 1 px that repeats in the x direction. My problem is that I am not getting it to fill in the total height of the page for some pages in various web browsers. What coding correction can be made to make it fill in the total height of the page?

I am using this code in my CSS sheet.

/* Body text and page background */
body {
margin: 0;
padding: 0;
font-family:"Book Antiqua", Times, Serif;
font-size: large;
color:#000000;
background-image: url("pics/black-brown.jpg");
background-repeat: repeat-x;
background-attachment: fixed;
text-align:left;
}

Can the Y direction be set to 100% or something like that?
 
 http://files.engineering.com/getfile.aspx?folder=2bcf2421-b7f2-42c5-b2f9-e737121110d9&file=black-brown.jpg
This image is only 720 pixels tall so the remainder of the page footer on larger displays (ie: any modern display) should probably be black.

Code:
background-color: black;
 
Thanks for that. I didn't think of that solution but it works great.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top