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.