hoachen Posted August 31, 2006 Share Posted August 31, 2006 I have problem for the height of the background image. I have a 800px X 350px gradient background image, I used css to make the image as a background so i can create text above the background layer. when my text area (inside the table with the background color) is longer then 350px, the gradiented image will only shows of the height of the image. The background image should be same height of the text (table height). THe webpage i create not every page are the same height. If I make it heigth to 800px X 1000px this will make the shorter page background look weired and no gradient background for the shorter page. This make it not nice if i repeat the background. And also, why my css background-image is not work on firefox? My question is how can i to accomplish these two? any advise will be very appreciate.Here is the link to view what i am talking about of my problem.http://www.hoachen.com.websitetestlink.com/<head><style type="text/css">div#img {background-image:url(file:///C|/Documents and Settings/siew/Desktop/test/bg.jpg); background-repeat:no-repeat;width:800px;height:350px;}</style></head><body><div id="img"> <table width="600" bgcolor="#00FF00" align="center"> <tr> <td width="637">Scientists Study Robot-Human Interactions <p>HATFIELD, England, Aug. 30 (UPI) -- British scientists are studying how people interact with robots to determine what future machines should look like and how they should behave.</p> blah blah blah </td> </tr></table></div> Link to comment Share on other sites More sharing options...
FahadQue Posted August 31, 2006 Share Posted August 31, 2006 put this text in your CSS Codebody { background-image: url('images/index_17.jpg'); background-repeat: no-repeat; background-attachment: fixed;}your background image will not scroll but your text will scroll.ThanxFahadQue Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 31, 2006 Share Posted August 31, 2006 you should change background-repeat:no-repeat tobackground-repeat:repeat-y;But that will make the background the size of the browser always, and you probably don't want that. Link to comment Share on other sites More sharing options...
hoachen Posted September 6, 2006 Author Share Posted September 6, 2006 Thank you very much for trying to help me to solve my problem.I tried and it works for the body.But, I have a grey color for my body so it does not work on the belowbody { background-image: url('images/index_17.jpg'); background-repeat: no-repeat; background-attachment: fixed;}I tried to put this gradient background inside the wrapper and it does not work even though i put the background-attachment:fixed. It will scoll the whole page.do you have any suggestion? Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 6, 2006 Share Posted September 6, 2006 Try setting the background-position.background-position:top right;or wherever you need it to be on the page. Link to comment Share on other sites More sharing options...
hoachen Posted September 6, 2006 Author Share Posted September 6, 2006 thank you for your advise.The background-position will do the position but not fix the problem i have. Try setting the background-position.background-position:top right;or wherever you need it to be on the page. Link to comment Share on other sites More sharing options...
hoachen Posted September 6, 2006 Author Share Posted September 6, 2006 Please see the below url of what i post earlier.The background image of the contents is not all the way down to the bottom of the article. The background image is fix 800px X 600px if the contents more than 600px height it will be look like what i have which i don;'t want to be. I want the background is same height with the article.http://www.hoachen.com.websitetestlink.com/test.html Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 6, 2006 Share Posted September 6, 2006 Check this link! is that the effect you are going for? Link to comment Share on other sites More sharing options...
hoachen Posted September 6, 2006 Author Share Posted September 6, 2006 Thanks you for you solution, but it does not look good though, the bottom image like stretch. Any other solutions? Check this link! is that the effect you are going for? Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 6, 2006 Share Posted September 6, 2006 The way you have your gradient set up, there is no way to not make it look bad when you repeat it. Thats just the way it is. If you stretched the image it would look really bad also. I'd suggest making a new gradient. Or take a few pixels from the bottom of the image and make them repeat at the bottom. But like you said, that looks bad also. Its hard to make a scaleable site with a texture an oddly placed gradient. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now