Background doesn't repeat-x

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Background doesn't repeat-x

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Background doesn't repeat-x

Post by kaszu »

Works for me in Vista FF3-RC1 and IE7.
What doctype are you using, browser?
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Background doesn't repeat-x

Post 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
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Background doesn't repeat-x

Post 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".
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Background doesn't repeat-x

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Background doesn't repeat-x

Post 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... :(
Post Reply