I want the background to be static (non scrolling)

here is the code i currently use.

body {

background-image: url(http://i733.photobucket.com/albums/ww337/DrummerBoyPicz/REPEATBACKROP.jpg);


this is the site - www.drummerboyclothing.co.uk/

4 answers


Add the following to your style:

background-repeat: no-repeat; /* stands for non repeating */
background-attachment: fixed; /* stands for non scrolling */
Answered over 7 years ago by NARKOZ

You might want to keep the repeat, but certainly background-attachment:fixed;

or you could use the shorthand CSS:

background: #000 url(http://i733.photobucket.com/albums/ww337/DrummerBoyPicz/REPEATBACKROP.jpg) repeat-y fixed top left;

but this approach will need a larger image, or one that fades to the background-color to avoid ugly edges.

Answered over 7 years ago by Tony Crockford

how big should the image be?

Answered over 7 years ago by Drummer Boy Clothing
  • if you're keeping it from tiling, big enough to fill the window of a normal page. Tony Crockford over 7 years ago

Be sure and reduce the memory footprint of your images: big_cartel_banner... is over 1 meg in size, and repreatbackdrop.jpg is 200K. Any image used for a large background should have a small as possible footprint.

You also have a character encoding mismatch: [Invalid] Markup Validation of www.drummerboyclothing.co.uk/ - W3C Markup Validator that may cause problems with text gremlins.

Answered over 7 years ago by songdogtech