CSS исправил повторную фоновую проблему - PullRequest
Новая
       10

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

2 голосов
/ 11 января 2009

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

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

Есть идеи?

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

CSS для фона: 

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}

Ответы [ 3 ]

4 голосов
/ 11 января 2009

Попробуйте следующий 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 выше, кажется, чтобы решить проблему.

0 голосов
/ 11 января 2009

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

body {min-width: 960px}

К сожалению, min-width не работает в старых версиях Internet Explorer без хака JavaScript, называемого minmax . Я бы предложил заключить код JavaScript для встраивания его в некоторые условные комментарии, чтобы предотвратить ненужный HTTP-запрос и возможные ошибки совместимости в новых браузерах. Встраиваем minmax так: 

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

Кроме того, общий совет - эти проблемы довольно легко решить, играя с firebug .

0 голосов
/ 11 января 2009

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

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

.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...