Центрированное фоновое изображение смещено на 1 пиксель.

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

  •  02-07-2019
  •  | 
  •  

Вопрос

Моя веб-страница находится в 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 не выравниваются вместе. .

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

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

Это было полезно?

Решение

Да, это известная проблема.К сожалению, вы можете исправить только ширину 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; }

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

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