Hello,
I would like to use an image as background. Unfortunately, when I set the Background-image property to url(myUrl), I get the image which repeats itself in the background in several row and column. I guess it's because the image its naturally small.
So, how to get the image to expends enough so that it does not repeat itself, but rather occupies all the back ground?
Thanks for helping.
You can have the property background-size in CSS3 for stretching a background image. But CSS3 isn't widely supported.
If you don't want to repeat the background image then you can use background-repeat: no-repeat.
You probably want this:
http://css-tricks.com/how-to-resizeable-background-image/
Looks like the simplest way.
P.S.: You can't do it with pure background-image. You have to do it with different layer.
you can use two methods; javascript or css
Jquery has a solution called suppersized; http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
or with CSS:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
AND HTML
<body>
<div>
<img id="background" src="image.jpg" alt="" title="" />
</div>