Правильное отображение background-image?

Question

[Chekistchek]

Как сделать, чтобы ширина подстраивалась и закрывала все доступное пространство, т.е. чтобы ширина была 100%. Когда ставлю 100% или убираю width картинка просто не отоброжается:

#p1JPG {
    height: 700px; 
    width: 2600px;
    background: url("../images/p1.JPG") center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.fixed {
    position: fixed;
}

<div class="fixed"><div id="p1JPG"></div></div>

В данном случае все нормально отображается, но на смартонах не работает background-attachment: fixed :

#p1JPG {
    height: 700px; 
    background: url("../images/p1.JPG") center center no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<div id="p1JPG"></div>

Answer 1

[Иван Татауш]

у элемента с position: fixed; обязательно должна быть указана ширина. Или укажи

position: fixed;
left: 0;
right: 0;

Comments

[Chekistchek]

Спасибо, так работает. Но, к сожалению, неюзабельно, когда много изображений(из-за position-fixed невозможно вставить между ними объект с position:static). Поэтому мне это не особо пригодилось.

[Иван Татауш]

Chekistchek: думаю что и для этого есть решение, но нужно картину видеть в целом и разбираться :)

Answer 2

[krainoff99]

#p1JPG {
    height: 700px; 
    width: 2600px;
    background: url("../images/p1.JPG") center center no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}