Large background images using css

Question

How can I load images to cover the whole background like some websites, using CSS. Not the usual background-image property but I want to load the images quickly.

Examples:

http://www.marinayachting.it/

http://alexandraowen.co.nz/

Answer 1

background-image is the only way to place images in CSS. If you want it to be vary large put it on the body element or a container div that fills the entire viewport.

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url('my_big_image.jpg') norepeat;
}

If you use a container div you can set position:fixed; top:0; left:0 and the image will remain stationary when the page scrolls.

There's no magic to it. As far as getting it to load quickly I don't think there's much you can do if it doesn't repeat. If it does repeat then make sure your image is the size of one module. This can be as little as one pixel tall or wide depending on the content.

Answer 2

There is no magic to making a background image load quickly, you just:

• Have a fast server.
• Compress the image as much as possible.
• Make your page HTML small so that the rest can start loading as soon as possible.
• Don't have many other images that also has to load.
• Don't have a lot of scripts and other external files that has to load.

Answer 3

I found this tutorial helpful. ->

http://css-tricks.com/perfect-full-page-background-image/

Answer 4

Bing is loading a normal background image with a fixed size. It´s not particularly fast (for me...), but perhaps it seems fast because the image is cached after the first time you load it.