Тянущийся фон без перезагрузки.
Привет! Вот есть 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:15. |