Как сделать адаптивный бэкграунд?

Question

[BOLTACHEVD]

Ставлю на бэкграунд картинку и хочу, чтобы она при уменьшении или увеличении не меняла своего размера.
сделал так и ничего не вышло, вообще перестало показывать изображение. Все пути правильны.

background-image : url( '../images/bg.png' ); 
background-repeat : no-repeat ; 
background-size : contain ; 
background-position : center ;

Answer 1

[Алим Алибаев]

background-size: 100%;

Answer 2

[Дмитрий]

"адаптивный" и "не меняло размера"? это же не адаптивный, а ровно наоборот...

судя по тому, что вы используете свойство "background-size : contain" вам как раз необходимо адаптивно сжимать-разжимать background. А для этого есть отличный плагин backstretch

Answer 3

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

Все работает
jsfiddle.net/QW01_01/s9oyhb3r

Еще раз проверьте пути

Comments

[BOLTACHEVD]

могу дать файл, в котором я это делаю. Там вообще изображение не выводит. Путь такой image/file.png - тут сложно ошибиться

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

BOLTACHEVD:
>тут сложно ошибиться
Значит все равно ошиблись. Вбейте абсолютный путь.

Answer 4

[Иван Ильясов]

У меня:
1. Стоит мететег в html-странице:

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. В css стилях body прописано:

body {
    background-image: url(images/background-photo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Это для больших экранов.

Если экран шириной меньше 768px, то грузится картинка поменьше (чтобы меньше весило, скорость загрузки сайта на моб устройствах на 90% выше):

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
	}