Jump to content

Background Headache


HKI
 Share

Recommended Posts

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

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

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

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

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>

Edited by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...