Сode
В первую очередь нам необходимо поместить изображение на страницу, и назначить ему id ‘background-image’.
При помощи JavaScript, мы вычислим размеры экрана пользователя, для того, чтобы в нормальном виде отобразить изображение.
Используя jQuery мы можем манипулировать размерами изображения посредством правил CSS:
Code
$(document).ready(function() {
var bgImage = $('#background-image');
function resizeImg() {
var imgwidth = bgImage.width(),
imgheight = bgImage.height(),
winwidth = $(window).width(),
winheight = $(window).height(),
widthratio = winwidth / imgwidth,
heightratio = winheight / imgheight,
widthdiff = heightratio * imgwidth,
heightdiff = widthratio * imgheight;
if(heightdiff>winheight) {
bgImage.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImage.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
$("#background-image").show();
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
});
CSS
Для того чтобы изображение находилось позади всего остального контента, нам необходимо абсолютно его спозиционировать и выставить наименьший z-index. Вы так же увидите, что свойство display выставлено в none. Это для тех, кто отключает JavaScript. Раз они такие нехорошие, то пусть у них ничего не отображается!
Code
#background-image {
position:absolute;
top:0;
left:0;
z-index:-10;
overflow: hidden;
width: 100%;
display:none;
}
Источник урока
Перевел: Станислав Протасевич
