Daney11 Posted May 23, 2009 Share Posted May 23, 2009 Hey guys, Please take a look at the attached image. Im using the below code, and the background.png is the attached image. body { background-image: url(../images/background.png); background-repeat: repeat-x; } #wrapper { width: 1000px; margin: 0 auto 0 auto; } Now the image background works fine, however all the content goes in the dark grey area, and when text overlapses the dark grey area, it goes onto the white area.... I need to know how to create the background so that the dark grey streches with the content, and the white will be below the content... Thanks Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted May 23, 2009 Share Posted May 23, 2009 A background image can not stretch, it can only tile. Quote Link to comment Share on other sites More sharing options...
Daney11 Posted May 23, 2009 Author Share Posted May 23, 2009 Ok. How would i create the background on my website then? So that the top section of my website will have the white and the 10px of dark grey, then the middle second will have the dark grey, and the bottom part of the website will just be white, and that all the text will go into the dark grey and white underneath? Thanks Quote Link to comment Share on other sites More sharing options...
DarkSuperHero Posted May 23, 2009 Share Posted May 23, 2009 3 divs... One aligned to the top, absolutly positioned....would have your top color one with your content no background color one aligned to the bottom, absolutely positioned, have the background be an image with your bottom background color set your body background to the color of your desired middle section.... :-D usually the way i go about this... make your top and bottom divs 100% wide, and tile the background in the x direction only... :-) Quote Link to comment Share on other sites More sharing options...
Daney11 Posted May 25, 2009 Author Share Posted May 25, 2009 Could you post a qucik example when you have a spare 5 minutes please. 100% divs dont go to the end of the broswer. i need to add it into body? Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 25, 2009 Share Posted May 25, 2009 For a div to have 100% height, it, and all it's parents should be set to 100%, for example: <html> <head> <style type='text/css'> body, html, .stretchy { height: 100%; padding: 0; margin: 0; } .stretchy{ background: lime; } </style> </head> <body> <div class="stretchy"> </div> </body> </html> Should result in a very very green page. 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.