Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Тянущийся фон без перезагрузки. (https://javascript.ru/forum/events/36683-tyanushhijjsya-fon-bez-perezagruzki.html)

cyber_bober 24.03.2013 17:44

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

cyber_bober,
событие resize , http://learn.javascript.ru/introduction-browser-events

danik.js 24.03.2013 17:57

body{
    background: url(image.jpg) no-repeat center;
    background-size: cover;
}

cyber_bober 24.03.2013 23:09

cyber,
danik.js,
Спасибо большое,мужики!)

Marker 27.03.2013 13:16

чтобы работало на всех браузерах (последние версии)

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;

danik.js 27.03.2013 14:00

Marker, -ms- приставка не нужна. Да и вообще, по большому счету на все эти приставки можно забить. http://caniuse.com/#search=background-size

Marker 29.03.2013 22:21

Цитата:

Сообщение от danik.js (Сообщение 242928)
Marker, -ms- приставка не нужна. Да и вообще, по большому счету на все эти приставки можно забить. http://caniuse.com/#search=background-size

Ок Кеп :)


Часовой пояс GMT +3, время: 00:15.