Центрированное фоновое изображение выключено на 1 пиксель

Question

Моя веб-страница находится в DIV шириной 960 пикселей, я размещаю этот DIV по центру страницы, используя код:

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

Мне нужно, чтобы фоновое изображение html / body располагалось внизу по середине страницы, что и происходит, однако, если видимая панель в браузере имеет нечетное число пикселей ширины, тогда центрированный фон и центрированный DIV выровнять вместе.

Это происходит только в ФФ.

Кто-нибудь знает об обходном пути?

Answer 1

Да, это известная проблема. К сожалению, вы можете исправить только div и ширину изображения или использовать скрипт для динамического изменения свойства stye.backgroundPosition. Еще одна хитрость - поместить выражение в определение класса CSS.

Answer 2

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

Установка отступов: 0px 0px 0px 1px; исправляет проблему для IE.

Карло Капокаса, Travian Games

Answer 3

(Наиболее) распространенная проблема заключается в том, что фоновое изображение имеет нечетное число, а контейнер - четное число. Я написал статью на своем лучшем английском языке, где я также объясняю, как браузер разместил вашу фотографию: проверьте ее здесь .

Answer 4

Мне удалось решить эту проблему с помощью jQuery:

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});

Answer 5

Как насчет создания div-оболочки с тем же фоновым изображением.

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

Оболочка имеет четное число, фон сохранит одинаковую позицию на любом размере экрана.

Answer 6

У меня была такая же проблема.

Чтобы получить фон по центру , вам нужно иметь фоновое изображение шире, чем область просмотра . Попробуйте использовать фон шириной 2500px . Это заставит браузер центрировать ту часть изображения, которая доступна для просмотра.

Дайте мне знать, если это работает для вас.