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

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

вот мой код:

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

Благодарность!


html css responsive-design responsive
person Peeter    schedule 24.05.2016    source источник
comment
Добавьте свой код, потому что без него мы не сможем вам помочь. В противном случае это будет закрыто как оффтоп.   -  person Marcos Pérez Gude    schedule 24.05.2016
comment
вот он, мой друг: travi-design.pl/s.html   -  person Peeter    schedule 24.05.2016
comment
Это не код, это html-страница. Отправьте нам фрагмент кода, в котором возникла проблема.   -  person Dhaval Chheda    schedule 24.05.2016
comment
да, но там вы можете увидеть всю страницу и найти решение. Проблема только в фоне, мне нужно, чтобы он не изменялся. Здесь у вас есть CSS-код для тела body{ background:url(/images/bg.jpg) top; повторение фона: без повторения; ширина:100%; поле:0 авто; }   -  person Peeter    schedule 24.05.2016
comment
Если вам нужно отображать что-то всегда слева и справа, было бы лучше, если бы вы поместили двух женщин в два отдельных блока и расположили их абсолютно.   -  person Sebastian Witeczek    schedule 24.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

Есть несколько проблем с вашим 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;
}
person Bradley    schedule 24.05.2016

arrow_upward
0
arrow_downward

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

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

person Johannes    schedule 24.05.2016