Резиновые фоновые картинки?

Question

[ExpFront]

Доброе время суток, подскажите, кто знает готовый плагин для reponsive background images? Мне нужно чтобы изображение сохраняло свою пропорциональность при разных разрешениях экрана. Настраивал это вручную через background-size : 100% auto и кучей медиакверис. Но каждый раз приходиться делать это по-новому. Жалко время терять. А в интернете найти самому не получается.

Answer 1

[Александр Таратин]

background-size: cover
Или я чего-то не понимаю?

Comments

[Александр Таратин]

caniuse.com/#feat=background-img-opts

[ExpFront]

Не совсем работает. Вот смотри как я реализовал то, что мне надо у себя на сайте expfront.github.io/LeCoffeat

Answer 2

[Сергей Виноградов]

<div class="intro">
  <img src="..." class="intro-bg">
  <div class="intro-content">
    ...
  </div>
</div>

.intro {
  position: relative;
}

.intro-bg {
  max-width: 100%;
  height: auto;
}

.intro-content {
  position: absolute;
  top 0; left 0;
  width: 100%;
  height: 100%;
}

Может быть такой вариант подойдет? Правда он не будет обрезать картинку.

А можно попробовать с помощью viewport units: caniuse.com/#feat=viewport-units, но там IE9+.

Answer 3

[maximus2011]

div{
background: url(../images/fon.png) no-repeat scroll center 0 / cover;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}