Центрированное фоновое изображение отключено на 1 пиксель
Моя веб-страница находится в 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 не выравниваются вместе .
Это происходит только в FF.
Кто-нибудь знает обходной путь?
Ответы 6
Да, это известная проблема. К сожалению, вы можете исправить только ширину div и изображения или использовать скрипт для динамического изменения свойства stye.backgroundPosition. Еще одна хитрость - добавить выражение в определение класса CSS.
Самая (наиболее) распространенная проблема заключается в том, что ваше фоновое изображение имеет нечетное число, а ваш контейнер - четное число. Я написал статью на моем лучшем английском о том, где я также объясняю, как браузер позиционирует ваше изображение: посмотри здесь.
Я обнаружил, что, создавая фоновое изображение с нечетным числом пикселей в ширину, проблема для Firefox решается.
Установка отступов: 0px 0px 0px 1px; устраняет проблему для IE.
Карло Капокаса, Travian Games
Я смог решить эту проблему с помощью jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
У меня такая же проблема.
Чтобы получить по центру фона, вам необходимо иметь фоновое изображение шире, чем область просмотра. Попробуйте использовать фон 2500 пикселей шириной. Это заставит браузер центрировать часть изображения, которую можно просмотреть.
Сообщите мне, если это сработает для вас.
Проблема не в этом. Проблема в том, что каждый браузер по-своему округляет ширину области просмотра до целого числа. Некоторые браузеры используют потолок (следующее по величине число) или пол (число без дроби).
А как насчет создания 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; }
Обертка имеет четное число, фон будет оставаться в том же положении на любом размере экрана.
FF @ fault? Блин ... ненавижу, когда мой приятель меня подводит.