PDA

View Full Version : CSS FF background image not expanding


Navarone
October 9th, 2008, 02:53 PM
I am trying to get my background image for the class "page" to expand in FF. It seems to only work in IE. The body background works in FF, IE but not the page background.

How do you get this to work?
http://dev-cambria.virtualhorizons.com/


css code


body {
margin: 0px 0px 0px 0px;
background-color: #FFFFFF;
background-image: url('../images/main_bg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
html, body {
margin: 0px;
padding: 0px;
text-align: center;
height: 100%; /* Required */
}

#wrap {
margin: 0 auto;
width: 963px; /* put the total with of the site */
}
.page
{
margin: 0 auto;
position: relative;
width: 963px;
text-align: left;
background-image: url('../images/page_bg.jpg');
background-repeat:repeat-y;
}
theCodeBot
October 9th, 2008, 03:47 PM
I've been posting a little too much in the flash forum lately... Imma start trolling the HTML forums once more :)

CSS doesn't (yet) allow for the stretching of background images. however, you can make an image with the src= the background image, and a class to set the width and z-index relative to it's parent (which must be the page div)



<div class="page">
<img src="../images/page_bg.jpg" class="page_bg"/>
Test text
</div>

div.page img.page_bg {
width:100%;
height:100%;
z-index: -1;
position:absolute;
/*setting to absolute removes it
from document flow, so it can act
as a background image*/
}
div.page {
position:relative !important
/*makes the previous absolute setting relative to parent*/
}
Navarone
October 9th, 2008, 03:54 PM
I just tried your suggestion but it didn't work in ff or ie. :puzzle:
theCodeBot
October 9th, 2008, 04:17 PM
I just tried your suggestion but it didn't work in ff or ie. :puzzle:
Just tested it.... this works fine for me in FF on Linux, didn't boot up the windows box to try Internet Exploder since i threw it together in about 30 seconds...
attached. (change file extension to .html)
Navarone
October 13th, 2008, 08:44 AM
Ok, I did get this work following your example until I added the DOCTYPE to the html test document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

After I added this FF did not work anymore.
Navarone
October 13th, 2008, 08:54 AM
Actually, I finally got this to work in FF and IE now. It turns out I needed to put my <form> tag inside my page div. Which is rather strange but there ya go. Thanks for your help.


<!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 runat="server">
<title>Cambria Suites</title>
<link rel="STYLESHEET" type="text/css" href="includes/StyleSheet.css" />
</head>
<body>
<div class="page">
<form id="form1" runat="server">

</form>
</div>
</body>
</html>
tfg
October 14th, 2008, 08:06 AM
Ok, I did get this work following your example until I added the DOCTYPE to the html test document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

After I added this FF did not work anymore.

that would be because the DTD above is a shorthand DTD. always use a full DTD to ensure your browsers work in standards compliance mode rather than quirks mode.