[RESOLVED] Expanding background image to fit working area [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Expanding background image to fit working area

rickduley

02-09-2010, 02:15 AM

My css defines the working area of a webpage:

#canvas
{
width: 100%;
background-image: url('../img/perthLifeBackground.gif');
background-repeat: no-repeat;
background-position: top;
background-attachment: scroll;
}

but the image is not bound to fill the available width. I cannot find a way to expand 'background-image' to always fill the space available.

Is there a way?

letmehaveago

02-09-2010, 02:37 AM

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body style='padding: 0px; margin: 0px;'>
<p style='background-color: black'>sdfds</p>
<div style='position:relative'>
<img style="position: absolute; width: 100%; height: 100%;z-index: -1" src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif">
<div><p>sdf</p><p>sdfsd</p><p>sdfsd</p>sdfsdf<p></p></div>
</div>
<p style='background-color: black'>sdfds</p>
</body>
</html>

it probably won't look too great if you have to use this, though.

rickduley

02-09-2010, 03:30 AM

That solution is implemented in the HTML. I'm hoping that there is a solution implemented in the CSS which would be cleaner.

I was looking for something like

background-image-width: 100%;

but can't see it. Thing is, I don't think I'm the only person who has wanted an image to completely fill the background of a webpage. There must be a solution. I just can't find it. :(

coothead

02-09-2010, 03:31 AM

Hi there rickduley,

Opera,Safari,Konqueror and Firefox all support the CSS3 background-size attribute. ;)
IE, as yet, does not. :eek:

Here is an example...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
color:#fff;
background-color:#000;
}
h1 {
font-size:1em;
line-height:1.5;
text-align:center;
}
div {
width:600px;
padding:20px;
border:3px double #f00;
margin:auto;
background-image:url(http://www.coothead.co.uk/images/banana.jpg);
-o-background-size:100% 100%; /* Opera */
-webkit-background-size:100% 100%; /* Safari */
-khtml-background-size:100% 100%; /* Konqueror */
-moz-background-size:100% 100%; /* Firefox */
background-repeat:no-repeat;
}
p {
visibility:hidden;
}
</style>

</head>
<body>

<h1>
The actual image size is 360px by 280px<br>
This box has a fixed width of 600px plus padding and border
</h1>

<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
<p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

</body>
</html>

coothead

rickduley

02-09-2010, 05:34 PM

Thanks to the folks who contributed to this thread. I guess

background-image-width: 100%;

will have to wait a while. In the meantime, I have contrived a (reasonably) satisfactory solution.

It is posted under 'Background Spanning Images'.

Cheers