I'm designing a site with a fixed repeated background but can't work out why it has one problem.
If you load the site in a small window, then scroll right, the background doesn't carry on and the background colour show's instead.
Any ideas?
Site is: http://new.focalpix.co.uk/
CSS for the background is:
body {
background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
you have defined body background: url in style.css line 13, but also defined rules for body background in the rule starting on line 17.
The rule on line 17 is for body, html, but the one starting on line 11 is just for body. You could probably condense these into one rule, defining exactly what you want the background to be -- a colour or an image from a url
Try the following CSS:
body, html {
color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
body {
font-size: 70%;
}
It looks like (in both Opera and Chrome) the browser is treating the area outside the browser's initial viewport as part of the HTML tag but not part of the BODY. You can verify this by putting the background-image on the HTML but not the BODY tag - and then see how it appears only in the scroll-to-view area of the document. I have no idea why this is happening - anyone?
CSS above appears to fix the problem, though.
This is due to the fact that the <body> tag is set by default to 100% of the width of browser window - not the site. This means when the width of the window is less than 960px - the width of your site, the body block ends. To fix this, simply set:
body {min-width: 960px}
Unfortunately, min-width does not work in old versions of Internet Explorer without a JavaScript hack called minmax. I would suggest enclosing the javascript embed code for it inside some conditional comments to prevent an unnecessary HTTP request and potential compatibility errors in new browsers. So embed minmax like so:
<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
Also, a general tip - these issues are fairly easy to resolve by playing with firebug.