Масштабируемое фоновое изображение

Недавно передо мной стала задача сделать масштабируемый фон для сайта. При чем быстро. В принципе задача нетрудная. Но как всегда встретились подводные камни. Сначала подумал просто использовать CSS 3 свойство background-size. Но тут без костылей не обойтись и этот вариант отбросил. Получилось следующее:

[codesyntax lang=»html4strict» title=»HTML»]

...
<body>
	<div id="mainImg">
		<img alt="" src="main.jpg"/>
	</div>
...

[/codesyntax]

 

[codesyntax lang=»css» title=»CSS»]

#mainImg {
    height: 100%;
    overflow: hidden;
    position: fixed;
    white-space: normal;
    width: 100%;
    z-index: -10;
}
#mainImg img {
    min-height: 100%;
    min-width: 990px;
    width: 100%;
    position: absolute;
    top: 0;
}

[/codesyntax]

Я просто вставил картинку после открывающего тега body (чтобы она сразу начала загружаться и контент не появлялся на белом фоне), обернутую в div. В принципе все понятно и вроде бы даже везде работает, но… Специфика картинки в том, что вверху у нее — небо. А так как она довольно большая, то на широкоформатных мониторах только это небо и видно, особенно если у вас в браузере установлены плагины, занимающие видимую область окна. Выход — отцентрировать картинку по вертикали. Как? В моем случае я использую JQuery (я знаю, что скоро он на сайте будет необходим), но можно пользоваться и чистым JavaScript.

[codesyntax lang=»javascript» title=»JQuery»]

$(document).ready(function() {
	var bgImage = $('#mainImg img');
	function resizeImg() {
		var imgheight = bgImage.height(),
		winheight = $(window).height();
		bgImage.css('top','-'+(imgheight - winheight)/2 + 'px')
	}
	resizeImg();
	$(window).resize(function() {
		resizeImg();
	});
});

[/codesyntax]

Теперь все нормально.

update 02.06.2011 — этот метод подходит, если вас устраивает background:fixed. Но бывают случаи, когда требуется background:absolute (например, если окно вместе с фоном должно прокручиваться).  Тогда код становится немного сложнее.

[codesyntax lang=»css» title=»CSS»]

#mainImg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    z-index:-10;
}
#mainImg img{
    top: 0;
    width: 100%;
    position: absolute;
}

[/codesyntax]

[codesyntax lang=»javascript» title=»JQuery»]

$(document).ready(function() {

    var bgImage = $('img','#mainImg');

    function resizeImg() {
            if ($('body').height() <= bgImage.height() && bgImage.width() <= $('body').width()){
                bgImage.css({'height':'auto','width':'100%'});
                bgImage.css({'left':0,'top':'-'+(bgImage.height() - $('body').height())/2 + 'px'});
            }
            else {
                bgImage.css({'height':'100%','width':'auto'});
                bgImage.css({'left':'-'+(bgImage.width() - $('body').width())/2 + 'px','top':0});
            }
    }
    bgImage.load(function(){
        resizeImg();
    })

    $(window).resize(function() {
        resizeImg();
    });

});

[/codesyntax]

Нам приходится менять с помощью JQuery не только отступы (margin), но и высоту (height) с шириной (width).

Вот, что получилось в итоге — http://riverabeach.com.ua/

Запись опубликована в рубрике HTML/CSS, JavaScript/JQuery с метками , , , , . Добавьте в закладки постоянную ссылку.

7 комментариев: Масштабируемое фоновое изображение

  1. Natali says:

    Возникли следующие трудности:
    в Chrome и Safari при первичной загрузке страницы фон масштабируется по ширине, а по высоте не верно рассчитывается длина — видно лишь 2/3 картинки, остальное обрезается.
    При перезагрузке либо изменении размера окна браузера фон выравнивается, и всё в порядке.
    В чем может быть причина таких необъяснимых действий?
    Не понятно в каком направлении даже искать пути решения ..
    В мозиле и опера работает нормально.
    IE — как всегда, особенный браузер.

    • Скорее всего это связано с тем, что картинка не успевает загружаться до выполнения скрипта. Но так как у нее стоит min-height:100%, то она принимает высоту окна. И скриптом ей задается top:0px. Чтобы это исправить нужно:
      1. Скрипт разместить внизу страницы
      2. В первый раз отработать ф-ю масштабирования так
      bgImage.load(function(){
      resizeImg();
      })
      3. Если не поможет и это, то попробуйте убрать min-height:100%
      Удачи!

      • Natali says:

        Спасибо огромное!! 1е и 2е молниеносно помогло! 🙂
        Остался только вопрос с IE — возможно ли как-то весь контент отобразить поверх фоновой картинки, сейчас фон сверху, весь контент ниже расположился.
        Или только предложить пользователю загрузить другой браузер?:)
        Уже ни один метод попробовала, IE упорно не хочет правильно масштабировать фон 🙁

  2. Иван says:

    У меня такой же случай. В Опере работает только если изменить размер окна браузера или поперезагружать страницу. В ИЕ9 — картинка не заполняет весь экран.
    CSS: .click{position:fixed;width:100%;height:100%;}
    Разместил скрипт в футер — не помогло.
    Вынес повыше строчки:
    bgImage.load(function(){
    resizeImg();
    PositionLoad();
    })

    $(window).resize(function() {
    resizeImg();
    PositionLoad();
    тоже не помогло.
    Может, есть другое решение?

  3. Юлия says:

    Добрый день. Подскажите, пожалуйста, как сделать, чтобы фоновое изображение, у которого ширина больше окна браузера, всегда было зафиксировано по центру и на всю его высоту, а лишние куски с лева и с права прятались за границы окна. Надо чтобы при растягивании окна браузера по горизонтали изображение оставалось по середине, а спрятанные «уши» постепенно вылазили.

Добавить комментарий для Иван Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *