Randomishlying Posted October 14, 2011 Share Posted October 14, 2011 First of all, I apologize for not being able to describe this very well, I'm still new to HMTL/CSS. Is there anyway to fill a specified area with a color based on the size of the window? Basically what I'm trying to do is repeat the bottom most "mainTable" gradient color to fill the rest of the page regardless of the size of the window. I also want it to be the same width as the main table. Here is an image: On a side note - Is the body element the only thing that allows a CSS background-repeat? I ask because I found I was unable to repeat an image background for a table. Is there any place that might be helpful to me in determining what CSS styles I can use with certain HTML tags? Some are obvious to me, but other are not so obvious, like not being able to repeat a background image in a table. Perhaps I was just doing something wrong.Here is my current code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Example</title><link href="all.css" rel="stylesheet" type="text/css" /></head><body id="theHeader" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <table id="ridesideHeader"> <tr> <td><p id="tagLine">We make things convenient for you!</p></td> </tr> <tr> <td id="navigation"> Navigation! </td> </tr> </table> </td> </tr></table><table id="mainTable" align="center"> <tr> <td><h1>MainTable!</h1></td> </tr> </table> </body></html> @charset "utf-8";#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#mainTable {background-image: url(images/background-gradient.png);background-repeat: repeat-x;height: 618px;width: 1024px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;}#logoBox {width: 268px;padding-left: 50px;}#tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 23px;font-style: italic;text-align: left;color: #FFF;}#navigation {height: 63px;width: 702px;padding-top: 0px;padding-left: 0px;} Link to comment Share on other sites More sharing options...
knystrom18 Posted October 15, 2011 Share Posted October 15, 2011 You should be able to do a background image for the body element. Set the body's background color to the color you'd like to fade into, for example orange, then make a gradient that fades into orange from white, white being at the top of the gradient. The body element is not the only element that can have a background repeated in it. I'm not sure of specific elements that cannot though. As far as I know, there is a CSS selector for every HTML element. I'm assuming every attribute can be used on any element, but to assume is to make an ###### out of you and me, so this might help: http://www.w3schools.com/cssref/default.asp. Link to comment Share on other sites More sharing options...
Randomishlying Posted October 15, 2011 Author Share Posted October 15, 2011 I think I understand you correctly, but I guess I don't know how to do that without filling the entire lower window with the orange part of the gradient. I only want the orange color directly below the main table gradient (keeping the same width as the table), so that it looks like the gradient only extends in height. I want the white space on the right and left side of the existing gradient to extend to the bottom of the window. If I completely missed what you were saying here, could you please show me what you were saying with code. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.