views:

56

answers:

2

Hello all

I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.

My problem is the image which will be used as background. I am thinking about following issues:

  • What should be image size?
  • how will it repeat when browser window size is very large? for big 27" monitors out there?

Can somebody guide me on these points?

Regards Vikram

+2  A: 

That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.

Babiker
Sorry about that, I have out a wrong link in there. Typo error
ShiVik
+1  A: 

There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.

The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.

Ken Redler