CODEWITHSUNDEEP
css
X10nD
X10nD

Reputation: 22040

Large background images using css

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/

Upvotes: 4

Views: 16519

Answers (8)

JGrubb
JGrubb

Reputation: 889

I found this tutorial helpful. ->

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

Upvotes: 4

reisio
reisio

Reputation: 3242

<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.

Upvotes: 0

Jason
Jason

Reputation: 52533

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.

Upvotes: 0

Gil
Gil

Reputation: 11

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.

Upvotes: 0

Guffa
Guffa

Reputation: 700552

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.

Upvotes: 7

gblazex
gblazex

Reputation: 50109

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

Upvotes: 1

jeroen
jeroen

Reputation: 91742

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.

Upvotes: 1

jasongetsdown
jasongetsdown

Reputation: 1305

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.

Upvotes: 10

Related Questions