Как поступить с бекграундом?

Question

[sergey]

Собственно все просто: есть background шириной 2622px и высотой 933px
задаю для header

header
  background: url("../img/bg-header.png") no-repeat
  width: 100%
  max-width: 2622px
  height: 933px

и трабл в том что картинка вся не помещается при просмотре, почему? по-идее она должна масштабироваться же.

Answer 1

[Алексей Колесников]

.bg {
	background: no-repeat top center url(../img/bg-header.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Comments

[sergey]

и картинка будет обрезана

[Алексей Колесников]

она будет пропорционально масштабироваться, и при необходимости обрезаться либо справа и слева, либо снизу. Если вам пропорции соблюдать не важно, тогда не смотрите мой ответ.

[sergey]

Алексей Колесников: а суть как раз в пропорциях

[Алексей Колесников]

sergey martynuk: ну так и будет. Cover - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. И естественно, если блок не пропорционален размерам картинки, она будет резаться.

[sergey]

Алексей Колесников: все можно решить background-size: 100% auto;

Answer 2

[LittleFatNinja]

jsfiddle давай

Comments

[sergey]

зачем для одной строки?

Answer 3

[Mr Crabbz]

Так width:100% же будет равняться полной ширине родительского элемента. В вашем случае скорее всего body, который в свою очередь скорее всего принимает ширину вьюпорта. Ну и вьюпорт скорее всего меньше, чем фон.