У меня статическая структура HTML, а мои фоновые изображения - полноэкранные страницы на каждой странице. Добавлен тег img после тега:
<img src="img/about.jpg" id="static_bg" alt="">
И CSS:
#static_bg { position: fixed; top: 0; left: 0; z-index: -2;}
.staticbgwidth { width: 100%; }
.staticbgheight { height: 100%; }
И последний, мой JS-код:
$(window).load(function() {
var theWindow = $(window),
$bg = $("#static_bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('staticbgheight');
} else {
$bg
.removeClass()
.addClass('staticbgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Да, он работает хорошо. Но я хочу, удалить IMG и добавить фон DIV. Когда я меняю это, не работайте с JS.
Как я могу это исправить? Спасибо.
<div class="your_div"></div>
.your_div {
background:url('img/about.jpg') no-repeat;
background-size:cover;
}
Попробуйте использовать background property in CSS
например,
#static_bg { background:url('img/about.jpg') ;
position: fixed; top: 0; left: 0; z-index: -2;}
И Div
нравится,
<div id="static_bg"></div>
Вы можете использовать background-size:cover
и применять background
на body
если выше не works
см. Эту демонстрацию
установите ID для вашего изображения следующим образом:
<img id="background-img" src="img/about.jpg" id="static_bg" alt="">
получите свой исходный код по этому коду:
var $bg-url = $("#background-img").attr("src");
затем удалите свой образ css следующим образом:
$("#background-img").css("display","none");
затем установите фон для этого элемента, который вы хотите. в этом случае $("#static_bg")
$("#static_bg").css("background-image",'url('"+$bg-url+'")');