Home/ Questions/Q 107493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T01:45:46+00:00

I’m designing a site with a fixed repeated background but can’t work out why

  • 0

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; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0