Web Site Background Image

[Norman]

Hey there, I have a question. I'd like to add a website image background. I don't want it to be repeated using CSS. I want it to be large as needed. It will be one image with no-repeat center top. What I need to know is, which should I consider when I add this type of image? Obviously the size of the file itself, for loading time issues. But going forward.. what else? Sould I consider what when I do that big image? Which size in pixel? This is an example site: http://www.webdesignerwall.com/. I need something similiar.

[jeffman]

That image 1s 1390 x 853 pixels. You can see it here. It seems to fill the page because it is centered, using background-position. It will not fill the window of wide screens, like my 1600px imac. To do that, you'd need a much bigger image. You can create a bigger image, but the cost is high. Or, do like this site does, and let the edges of the image fade into the body's background color.This also helps create the illusion that the image fills the space vertically. To continue the effect of a long, vertical "piece of paper" you could use a repeating gif with background color on left and right, the central white color, and maybe a little shadow where they meet. That could be 1px tall, or taller (maybe 20px) if you want to incorporate another element, like the repeating "page lines" visible to the right.A third image, like the top image, fills out a footer element. It also needs to be big.This page contains a nice execution of some basic tricks.The top image is huge, though, and takes a while to load. So you have to keep that in mind. On the other hand, repeat visitors will have the benefit of caching.

[Norman]

Thank you for your reply, Dad. But.. then there is no definied 'width' and 'height' for a background image, right? I can do that as bigger as I want.

[Yvil]

Thank you for your reply, Dad. But.. then there is no definied 'width' and 'height' for a background image, right? I can do that as bigger as I want.

No, there's no defined width and height, it'll just display the entire image.The best thing to do is either use a tiled background image (but you don't want that) or make the image fade into the background-color.Also, another thing to decrease the filesize is saving the image as .jpg (as on WebDesignerWall) or .gif.