Большие фоновые изображения с использованием CSS

Question

Как я могу загрузить изображения, чтобы покрыть весь фон, как некоторые веб-сайты, используя CSS. Не обычное свойство background-image, но я хочу быстро загрузить изображения.

Примеры:

http://www.marinayachting.it/

http://alexandraowen.co.nz/

Answer 1

Я парень, который сделал marinayachting.it.

Как правило, для больших (и масштабируемых) фонов существует три способа: использовать css background-image, растянуть тег <img /> в положении: исправлено или использовать в обе стороны .

Лучший способ - использовать css background-image с новым классным свойством background-size. Firefox (начиная с 3.6, я думаю), Safari, Chrome и Opera поддерживают его (пока с префиксами вендоров). Плохой парень - (угадай!) Internet Explorer. Итак, хитрость заключается в том, чтобы нацелиться на IE и Firefox <3.6 через javascript и внедрить растянутый тег <code><img /> в документ onready событие.

Для ускорения экспорта экспортируйте изображение размером не более 1024 пикселей (на некоторых изображениях работает даже меньшее разрешение) и размером не более 100 КБ. Конечно, быстрый сервер или даже лучше CDN помогут.

Обратите внимание, что IE до версии 8 отображает растянутые изображения очень некрасиво (линейное масштабирование) и работает медленно! Использование фирменного поставщика css -ms-interpolation-mode:bicubic; немного поможет, но также сделает этот дерьмовый браузер еще медленнее. Для наилучшего качества и производительности вы можете использовать фильтр AlphaImageLoader. Да, то же самое использовалось для решения проблем прозрачности PNG в старой версии IE6. Например. фоны и анимированная карусель в разделах галереи marinayachting.it загружаются фильтром AlphaImageLoader. В частности, карусель, которая использует слегка растянутые png-файлы, анимированные с помощью javascript, работала со скоростью 0,5 кадра в секунду без фильтра!

Answer 2

background-image - единственный способ разместить изображения в CSS.Если вы хотите, чтобы он был большим, поместите его в элемент body или контейнер div, который заполняет весь видовой экран.

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

Если вы используете контейнер div, вы можете установить position:fixed; top:0; left:0 и изображение будет оставаться неподвижным при прокрутке страницы.

В этом нет магии.Что касается быстрой загрузки, я не думаю, что вы можете многое сделать, если это не повторится.Если оно повторяется, убедитесь, что ваше изображение имеет размер одного модуля.Это может быть всего один пиксель высотой или шириной в зависимости от содержимого.

Answer 3

Нет ничего волшебного в том, чтобы быстро загрузить фоновое изображение, просто:

• Иметь быстрый сервер.
• Сжать изображение как можно больше.
• Сделайте HTML-код вашей страницы маленьким, чтобы остальные могли начать загрузку как можно скорее.
• Не нужно загружать много других изображений.
• Не многоскриптов и других внешних файлов, которые должны быть загружены.

Answer 4

Я нашел этот урок полезным.->

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

Answer 5

Вы можете установить встроенный стиль, чтобы изображение могло начать загрузку, не дожидаясь готовности любого файла CSS

Answer 6

Bing загружает обычное фоновое изображение с фиксированным размером.Это не особенно быстро (для меня ...), но, возможно, это кажется быстрым, потому что изображение кэшируется после первой загрузки.

Answer 7

<img id="<a href="http://en.wikipedia.org/wiki/Foobar" rel="nofollow noreferrer">foo</a>" src="<a href="http://en.wikipedia.org/wiki/Foobar" rel="nofollow noreferrer">bar</a>" alt=""> с #foo { width: 100%; height: 100%; }
(используйте position: absolute; / position: relative; & z-index для наложения по желанию)

Вот старый пример .

Answer 8

На вашем втором примере сайта 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.

Answer 9

Если вы установите изображение, скажем, изображение в качестве фона, вам нужно сделать его достаточно большим, чтобы вместить экран большого размера. Вы не хотите, чтобы на вашем сайте было впечатление, что ваша картинка повторяется на экране несколько раз. Вероятно, наименьшая ширина должна быть 1260 пикселей. Если фон представляет собой простой градиент, вы можете вырезать небольшую его часть в фотошопе и нанести его на тело следующим образом:

тело {
поле: 0;
отступ: 0;
background: #fff url (your / image / location.jpg) repeat-x scroll 0 0;
}

Этот метод может быть применен и к div'ам, удачи.