статическое фоновое изображение в отзывчивом веб-сайте - не изменяет размер

Question

Я сделал небольшой сайт reposnsive. Все выглядит хорошо, но не фон. Проблема в том, что этот фон является изображением и показывает 2 Женщины по бокам (слева и справа). Часть их тел должна быть всегда видна по бокам. Но когда я меняю разрешения, Background меняет размер:/Как сделать фоновый статический? background-attachment: исправления; не помогает мне

вот мой код:

body{ 
    background:url(/images/bg.jpg) top; 
    background-repeat:no-repeat; 
    width:100%; 
    margin:0 auto; 
} 

спасибо!

Answer 1

Есть несколько проблем с CSS:

• Вы не уточняя, как большой фон должен быть
• Вы не уточняя, как фон должен отображать
• Вы не с указанием того, как фон должен быть позиционирован;
• Вы неправильно указываете фон.

Вот что вы должны использовать:

body { 
    background-image: url(http://travi-design.pl/klienci/rea_strefamarek/szablon/images/bg.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    width: 100%; 
    margin: 0 auto; 
} 

Answer 2

Я бы разделить этот образ в двух отдельных изображений и использовать их, как я описал один раз в предыдущем посте для подобной ситуации (это время с видео в середине): https://stackoverflow.com/a/34192574/5641669 и Фидл на http://jsfiddle.net/fusuhga6/2/

#Container элемент имеет процентное значение ширины (100%), плюс max-width в рх, равную общую сумму ширины центрального элемента плюс ширину двух изображений. Это margin: 0 auto сделать его центром по горизонтали внутри окна браузера или окружающего контейнера. Два изображения включены как два фоновых изображения этого контейнера, один выровненный слева, другой выровненный справа (вверху). Все элементы имеют одинаковую высоту. Размер элемента видео фиксирован (250px x 200px в примере скрипки). Он также имеет margin: 0 auto, чтобы центрировать его горизонтально в пределах #Container.

Answer 3

*, html{ margin: 0; 
 
    padding: 0;} 
 
body{ 
 
    background: #c4c4c4; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.content{ 
 
    position: relative; 
 
} 
 

 
.backgroundBox{ 
 
    height: 100%; 
 
    width: 100px; 
 
    position: absolute; 
 
    
 
} 
 

 
.leftSide{ 
 
    background: #a9a9a9; 
 
    left: 0px; 
 
} 
 

 
.rightSide{ 
 
    background: #bbbbbb; 
 
    right: 0px; 
 
}

<div class="leftSide backgroundBox"></div> 
 
<div class="rightSide backgroundBox"></div> 
 

 
<div class="content"> 
 
<h1>Page Content</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </p> 
 
</div>