HKI Posted December 20, 2009 Share Posted December 20, 2009 I'm trying to get the background image to cover the whole screen. But right now what ever i do it either covers the whole screen with the background about 20times(http://i46.tinypic.com/adgh7d.jpg) in small pieces or just right/left/center/top/bottom in a small piece. <style type="text/css">Body { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; background-attachment: fixed; background-image:url('bg.png'); background-repeat: repeat;}</style> So if someone spots the problem, it would be great. Link to comment Share on other sites More sharing options...
Ingolme Posted December 20, 2009 Share Posted December 20, 2009 A background image will never resize itself. It will be exactly as big as the image file is. You can only choose to repeat it or to not repeat it.You can try setting background-repeat to "no-repeat"If you want it to stretch you'll need an <img> element and not a background image. Link to comment Share on other sites More sharing options...
HKI Posted December 20, 2009 Author Share Posted December 20, 2009 Aha, Thank you Link to comment Share on other sites More sharing options...
jeffman Posted December 20, 2009 Share Posted December 20, 2009 Never mind. Should've reloaded before I posted. Link to comment Share on other sites More sharing options...
pizzaguy Posted December 22, 2009 Share Posted December 22, 2009 Actually, using CSS 3, you can fix this. Take a look at this link, and scroll down to the heading "New Property: Background Size" Link to comment Share on other sites More sharing options...
HKI Posted December 30, 2009 Author Share Posted December 30, 2009 Sorry for posting late, anyways, what ever i still do the background won't "expand" itself to cover ther whole site just either center/left/right/top etc or repeats itself 1000 times. so does anyone got a clue what i could write in css and html to make bg.bmp to show over the whole site? Link to comment Share on other sites More sharing options...
thescientist Posted December 30, 2009 Share Posted December 30, 2009 Sorry for posting late, anyways, what ever i still do the background won't "expand" itself to cover ther whole site just either center/left/right/top etc or repeats itself 1000 times. so does anyone got a clue what i could write in css and html to make bg.bmp to show over the whole site?I think Ingolme already gave you what you where looking for.A background image will never resize itself. It will be exactly as big as the image file is. You can only choose to repeat it or to not repeat it.You can try setting background-repeat to "no-repeat"If you want it to stretch you'll need an <img> element and not a background image.Did you try that and it is still not working? Link to comment Share on other sites More sharing options...
HKI Posted December 30, 2009 Author Share Posted December 30, 2009 yep already tried that, didn't work. Link to comment Share on other sites More sharing options...
jeffman Posted December 31, 2009 Share Posted December 31, 2009 You'd better post your current CSS and relevent HTML. And keep in mind, even if you do get a smaller image to expand all over the window, the result will look pixelated or blurry, probably not something you want. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 31, 2009 Share Posted December 31, 2009 you should have something similar to this<!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">*{margin:0; padding:0;}#wrapper{position:relative;}#outer{position:absolute; top:0; left:0; width:100%;}#bkgrnd{width:100%;}#header{height:120px; margin-bottom:10px; border:1px solid #ccc;}#left{width:180px; height:600px; float:left; border:1px solid #ccc;}#mainbody{ height:600px;margin-left:190px; border:1px solid #ccc; color:#ccc;}p{margin-bottom:0.9em;}</style></head><body><div id="wrapper"><img id="bkgrnd" src="mybackgroundimg.jpg" /><div id="outer"><div id="header">Header Content</div><div id="left"></div><div id="mainbody"> <p>Lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut enim ad minim veniam, duis aute irure dolor. In reprehenderit in voluptate ullamco laboris nisi consectetur adipisicing elit. Cupidatat non proident, sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat sed do eiusmod tempor incididunt sunt in culpa. Velit esse cillum dolore. Duis aute irure dolor ut aliquip ex ea commodo consequat.</p> <p>In reprehenderit in voluptate quis nostrud exercitation sed do eiusmod tempor incididunt. Qui officia deserunt eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ut enim ad minim veniam, quis nostrud exercitation. Sed do eiusmod tempor incididunt sunt in culpa in reprehenderit in voluptate. Ut labore et dolore magna aliqua.</p> <p>Ullamco laboris nisi excepteur sint occaecat ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. In reprehenderit in voluptate lorem ipsum dolor sit amet, duis aute irure dolor. Qui officia deserunt sed do eiusmod tempor incididunt mollit anim id est laborum. Eu fugiat nulla pariatur.</p> <p>In reprehenderit in voluptate velit esse cillum dolore excepteur sint occaecat. Sed do eiusmod tempor incididunt mollit anim id est laborum. Lorem ipsum dolor sit amet, qui officia deserunt in reprehenderit in voluptate. Ut enim ad minim veniam. Consectetur adipisicing elit, excepteur sint occaecat velit esse cillum dolore.</p></div></div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.