Тянущийся фон без перезагрузки.
Привет! Вот есть img в фоне старницы, нашел такой скрипт
$(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();
});
});
Но проблема вся в том, что фон будет подкручивать размер изображения только при перезагрузке. Как можно сделать, чтобы он в режиме реального времени подгонял размер изображения? |
cyber_bober,
событие resize , http://learn.javascript.ru/introduction-browser-events |
body{
background: url(image.jpg) no-repeat center;
background-size: cover;
}
|
cyber,
danik.js, Спасибо большое,мужики!) |
чтобы работало на всех браузерах (последние версии)
background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; |
Marker, -ms- приставка не нужна. Да и вообще, по большому счету на все эти приставки можно забить. http://caniuse.com/#search=background-size
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:04. |