CSS исправлена ​​повторяющаяся фоновая проблема

StackOverflow https://stackoverflow.com/questions/432784

  •  10-07-2019
  •  | 
  •  

Вопрос

Я разрабатываю сайт с фиксированным повторным фоном, но не могу понять, почему у него есть одна проблема.

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

Есть идеи?

Сайт: http://new.focalpix.co.uk/

CSS для фона: 

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Это было полезно?

Решение

Попробуйте следующий CSS: 

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

Похоже (как в Opera, так и в Chrome) браузер обрабатывает область за пределами исходного окна просмотра браузера как часть HTML-тега, но не как часть BODY. Вы можете убедиться в этом, поместив фоновое изображение в HTML-код, но не в тег BODY, а затем посмотрите, как оно отображается только в области прокрутки для просмотра документа. Я понятия не имею, почему это происходит - кто-нибудь?

CSS выше, похоже, решает проблему.

Другие советы

вы определили фон тела: url в строке style.css 13, но также определили правила для фона тела в правиле, начинающемся на строке 17.

Правило в строке 17 относится к телу, html, но правило, начинающееся со строки 11, относится только к телу. Возможно, вы могли бы объединить их в одно правило, точно определив, каким должен быть фон: цвет или изображение из URL

Это связано с тем, что для тега <body> по умолчанию установлено значение 100% ширины окна браузера, а не для сайта. Это означает, что когда ширина окна меньше 960 пикселей - ширина вашего сайта, блок тела заканчивается. Чтобы это исправить, просто установите: 

body {min-width: 960px}

К сожалению, min-width не работает в старых версиях Internet Explorer без взлома JavaScript под названием firebug .

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top