Large background images using css_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-05 03:00 出处：网络

How can I load imag开发者_JAVA技巧es to cover the whole background like some websites, using CSS.Notthe usual background-image property but I want to load the images quickly.

相关专题：css

How can I load imag开发者_JAVA技巧es 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/

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.

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.

I found this tutorial helpful. ->

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

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.

You can set the style inline so that the image can start downloading without waiting for any css file to be ready.

If you set an image let's say a picture as a background you need to make it large enough to accommodate large screen sizes. You don't want the experience on your site to be, that your picture repeats multiple times on the screen. Probably at the least width should be 1260px. If background is just a simple gradient, you can cut a small part of it in photoshop and apply it on the body like this:

body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}

This method could be applied to divs too, Good luck.

In your second example site, alexandraowen.co.nz, if you took a second to look at the JS they use, you would have seen the following:

// backgrounds --------------------------------------------------------------//

var Backgrounds = {};

Backgrounds.init = function()
{

    $('body').each
    (  
        function()
        {
            var imgsrc = $(this).css('background-image');
            if(imgsrc != 'none')
            {
                imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
                $(this).css('background-image', 'none');
                $(this).prepend('');
                if($.browser.msie)
                {
                    // ie 7 is the slow kid and we have to strip out quote marks ffs!
                    $(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
                }
                else
                {
                    $(this).find('div.bg img').attr('src', imgsrc);
                }
            }
        }
    );
    Backgrounds.resizeHandler();
    $(window).resize(Backgrounds.resizeHandler);
    $('div.bg img').load(Backgrounds.resizeHandler);
}

Backgrounds.resizeHandler = function()
{   
    var w = $(window).width();
    var h = $(window).height();

    $('div.bg img').each
    (  
        function()
        {   
            var wr = w / $(this).width();
            var hr = h / $(this).height();
            var r = Math.max(wr, hr);
            var imgw = Math.round($(this).width() * r);
            var imgh = Math.round($(this).height() * r);

            $(this).width( imgw );
            $(this).height(  imgh );

            var l = Math.round((w/2) - (imgw/2));
            $(this).css('margin-left', l+'px');
        }
    );
}

As well as the HTML on the page:

<body style="background-image: none; ">

If you dig into their scripts a bit more, you can see what they did. But I guarantee you it's nothing faster than just setting the background-image property.

<img id="foo" src="bar" alt=""> with #foo { width: 100%; height: 100%; }
(use position: absolute; / position: relative; & z-index for layering as desired)

Here's an old example.