Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.03.2013, 17:44
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

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



});


Но проблема вся в том, что фон будет подкручивать размер изображения только при перезагрузке. Как можно сделать, чтобы он в режиме реального времени подгонял размер изображения?
Ответить с цитированием
  #2 (permalink)  
Старый 24.03.2013, 17:50
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

cyber_bober,
событие resize , http://learn.javascript.ru/introduction-browser-events
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 24.03.2013, 17:57
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

body{
    background: url(image.jpg) no-repeat center;
    background-size: cover;
}
Ответить с цитированием
  #4 (permalink)  
Старый 24.03.2013, 23:09
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

cyber,
danik.js,
Спасибо большое,мужики!)
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2013, 13:16
Аспирант
Отправить личное сообщение для Marker Посмотреть профиль Найти все сообщения от Marker
 
Регистрация: 06.01.2013
Сообщений: 95

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

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2013, 14:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Marker, -ms- приставка не нужна. Да и вообще, по большому счету на все эти приставки можно забить. http://caniuse.com/#search=background-size
Ответить с цитированием
  #7 (permalink)  
Старый 29.03.2013, 22:21
Аспирант
Отправить личное сообщение для Marker Посмотреть профиль Найти все сообщения от Marker
 
Регистрация: 06.01.2013
Сообщений: 95

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
переключение страниц без перезагрузки VEGA jQuery 13 07.03.2013 13:52
Как можно сделать подгрузку и смену изображения без перезагрузки страницы с другого Евгений Болгов jQuery 11 21.10.2010 18:18
Изменение содержания страницы без полной перезагрузки самой страни gelo Events/DOM/Window 7 29.08.2010 02:03
Подскажите как в VLC плеере переключать канал без перезагрузки страницы? mff Events/DOM/Window 0 10.05.2010 17:28
реализация добавления поля формы без перезагрузки sc2r2bey Элементы интерфейса 1 31.07.2009 16:51