Geek Answers Handbook

Large background images using css

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

Examples:

http://www.marinayachting.it/

http://alexandraowen.co.nz/

+5
source share
9 answers

background-imageis the only way to place images in CSS. If you want it to be large, put it on an element bodyor container divthat 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:0and the image will remain stationary while scrolling through the page.

. , , , . , , . .

+11

, marinayachting.it.

, ( ) : css background-image, <img />, : .

- css background-image background-size. Firefox ( 3,6, ), Safari, Chrome Opera ( , ). (!) Internet Explorer. , , IE Firefox < 3.6 javascript <img /> onready.

1024 ( , ) 100 . , CDN.

, IE 8 ( ) slooow! css -ms-interpolation-mode:bicubic; , . AlphaImageLoader. , png IE6. . marinayachting.it AlphaImageLoader. , , png, javascript, 0.5fps !

+16

, :

  • .
  • .
  • HTML , .
  • .
  • .
+7

Bing . ( ...), , , , .

+1

inline, , , - css .

+1

, , , , . , , . , 1260 . - , :

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

divs, .

0

alexandraowen.co.nz, , JS, , :

// 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');
        }
    );
}

HTML :

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

, , . , background-image.

0

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

.

0

More articles:


All Articles