Фоновое изображение Firefox по горизонтали - PullRequest
Новая
       15

Фоновое изображение Firefox по горизонтали

5 голосов
/ 09 ноября 2009

Я создаю базовый HTML-код для CMS. Одним из параметров, связанных со страницей в CMS, является «фоновое изображение» и «растянуть ширину / высоту страницы до ширины / высоты фонового изображения». так что с большими фоновыми изображениями все это становится видимым.

Мое текущее разрешение экрана 1280 x 1024.

Если я сделаю следующее:

  • Укажите фоновое изображение шириной 1400 пикселей
  • Укажите "положение" как "центр центра" (горизонт. / Верт.)
  • Укажите «растянуть ширину страницы до ширины фонового изображения»

затем в FF происходит следующее:

  • страница правильно растянута до 1400 пикселей. Я получаю горизонтальную полосу прокрутки, так как мой экран меньше этого. Пока все хорошо.
  • и теперь странная вещь: фоновое изображение не центрировано относительно 1400px, что показывает полное изображение, но относительно моего окна просмотра 1280px, скрывая часть изображения за пределами левый край экрана и оставляя белую полосу вправо вместо показа всего изображения.
  • Нет никаких дополнительных элементов (DIVs, оболочки ...), которые могли бы манипулировать чем угодно. Все настройки находятся прямо в теле.

Обновление: IE делает это правильно. У Google Chrome такая же проблема.

Как будто Firefox сначала визуализирует фоновое изображение на 100% ширины, центрирует его, а затем замечает, что тело должно быть растянуто до 1400 пикселей.

Это нормальное поведение Firefox? Есть идеи, что я могу сделать?

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

CSS: 

body 
 {
 background-image: url(http://www.domain.com....image.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 min-width: 1400px;
 height: 100%;
 }

Ответы [ 3 ]

3 голосов
/ 09 ноября 2009

Вас укусила причудливость спецификации CSS: благодаря section 14.2 любое фоновое изображение, которое вы применяете к элементу body, становится фоном для html. (Это было сделано для того, чтобы авторы могли использовать фон на теге body там, где они ожидали, что это были браузеры до CSS).

В IE html представляет весь холст документа и расширяется, чтобы соответствовать увеличенной ширине тела. В других браузерах он действует как любой другой элемент display: block и сохраняет ширину области просмотра независимо от того, что вы в нее вставили. Другие браузеры здесь, пожалуй, более корректны, но спецификация CSS не совсем понятна по этой теме, и в результате результаты в IE более точно соответствуют формулировке 14.2 о канве. В любом случае, на самом деле не указано надежное поведение.

Вы можете получить согласованные результаты в разных браузерах, установив ширину и фон на html вместо body. (Не забудьте использовать режим стандартов в IE.)

Но документ 1400px с фиксированной шириной? Звучит как очень плохая идея.

1 голос
/ 09 ноября 2009

попробуйте добавить: 

width: 100%;
display: table;

в стиле body (также может потребоваться background-attachment: fixed;)

0 голосов
/ 09 ноября 2009

background-position должна быть слева вверху; Вы установили 

body{
margin:0;
padding:0;
}
...