Page 1 of 1

Background doesn't repeat-x

Posted: Fri May 23, 2008 8:18 am
by Sindarin

Code: Select all

 
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
body {
    background-image: url(images/layout/background-pattern.jpg);
    background-repeat: repeat;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
 
#apDiv1 {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:316px;
    z-index:1;
    background-image:url(images/layout/background-gradient.jpg);
    background-repeat:repeat-x;
}
I am trying to place a background over the document background (which repeats x and y) and repeat it by x (horizontally), but the width:100% doesn't work.

Re: Background doesn't repeat-x

Posted: Fri May 23, 2008 12:16 pm
by kaszu
Works for me in Vista FF3-RC1 and IE7.
What doctype are you using, browser?

Re: Background doesn't repeat-x

Posted: Mon May 26, 2008 4:02 am
by Sindarin
Windows XP with IE7 and FF2. The doctype is transitional.

Here's the page code:

Code: Select all

<!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>
 
<!--Encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
 
<style type="text/css">
<!--
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
body {
    background-image: url(images/layout/background-pattern.jpg);
    background-repeat: repeat;
}
#wrapper {
    position:relative;
    width:980px;
    height:100%;
    margin:0 auto;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
}
#apDiv1 {
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:316px;
    z-index:1;
    background-image:url(images/layout/background-gradient.jpg);
    background-repeat:repeat;
    visibility: visible;
    overflow: visible;
}
#apDiv2 {
    position:absolute;
    left:19px;
    top:17px;
    width:687px;
    height:414px;
    z-index:2;
}
-->
</style></head>
<body>
<div id="apDiv1"></div>
<div id="wrapper">
  <div id="apDiv2">
  <table width="679" height="203" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="90" colspan="2" align="left" valign="top"><img src="images/layout/top.jpg" width="949" height="90" /></td>
    </tr>
    <tr>
      <td height="19" colspan="2" align="left" valign="top" background="images/layout/menu-background.jpg" bgcolor="#FFFFFF"><img src="images/layout/menu-background.jpg" width="17" height="19" /><a href="products.php"><img src="images/layout/button-products.jpg" width="68" height="19" border="0" hoversrc="images/layout/button-products-rollover.jpg" /></a><a href="ektheseis.php"><img src="images/layout/button-ektheseis.jpg" width="162" height="19" border="0" hoversrc="images/layout/button-ektheseis-rollover.jpg" /></a><a href="contact.php"><img src="images/layout/button-contact.jpg" width="95" height="19" border="0" hoversrc="images/layout/button-contact-rollover.jpg" /></a></td>
      </tr>
    <tr>
      <td width="249" height="22" align="left" valign="top" bgcolor="#FFFFFF"><?php require_once('menu.php'); ?></td>
      <td width="700" align="left" valign="top" bgcolor="#FFFFFF"><?php require_once('product.php'); ?></td>
    </tr>
    <tr>
      <td colspan="2" align="left" valign="top"><img src="images/layout/bottom.jpg" width="948" height="72" /></td>
    </tr>
  </table>
</div>
</div>
<!--rollOver script-->
<script type='text/javascript' src='scripts/jscript/rollover.js'></script>
</body>
</html>
 
So here's the problem. It seems when the browser window is maximized, the repeat-x works, but when it's not maximized it doesn't.

Image
Image

Re: Background doesn't repeat-x

Posted: Mon May 26, 2008 9:47 am
by pickle
Put a border around your div & see if it's really extending as far as you think. Also set your background-repeat property to "repeat-x", not just "repeat".

Re: Background doesn't repeat-x

Posted: Tue May 27, 2008 12:31 pm
by kaszu
Problem is that #apDiv1 width is browser viewport width not the content.
Only solution what i found is to put #apDiv1 inside another div (for example #apDiv1Holder).

Code: Select all

<div id="apDiv1Holder"><div id="apDiv1"></div></div>

Code: Select all

#apDiv1Holder { position: relative; min-width: 980px; }
Works in IE7 and FF3, but most likely will fail in IE6

Why are you positioning it absolutely? Put all content inside this div and it should work.

Re: Background doesn't repeat-x

Posted: Thu May 29, 2008 8:34 am
by Sindarin
Still none of these solutions worked. 8O

I've confirmed though that this cutoff happens when I put images on the page and the window is not maximized.

EDIT:
Problem is that #apDiv1 width is browser viewport width not the content.
Wait, I think I understand. I tried your way and you're right. I also tried putting an 100% width transparent gif image in the #apDiv1 and it worked as well. (Maybe it works in IE6 as well). So it needed content to stretch the div, bad thing backgrounds cannot stretch or images do not have repeat property... :(