Проблема позиционирования фонового изображения

Question

Это мой стиль CSS. Мой #pg_wrap не центрируется с фоновым изображением при изменении размера окна браузера. Снимок экрана, который я имею, - это когда вы уменьшаете окно браузера менее чем на 1344 пикселя, чем ширина #pg_wrap (ширина не должна быть такой, это был просто тестовый номер).

Снимок экрана был сделан с Firefox, который делает это. Хром этого не делает. Как заставить фоновое изображение оставаться на месте?

Chrome

Firefox

body
{
    text-align: center;
    background-image: url('p_bg_75.jpg');
    background-repeat: repeat-y;
    background-color: black;
    background-attachment:fixed
    margin: 0px;
    padding: 0px;

}
#pg_wrap
{
    margin-left: auto;
    margin-right: auto;
    width: 1344px;
    height: 1000px;
    border: 1px solid white;
    text-align: center;
}

Answer 1

Вы забыли объявить фоновую позицию? Помните, что выравнивание текста не выравнивает фон. Как одно объявление, кажется, что вы после:

background: #000000 url('p_bg_75.jpg') repeat-y fixed top center;

По твоему вопросу я не могу сказать, действительно ли ты хочешь, чтобы вложение было «исправлено», но я сомневаюсь, что, учитывая твои скриншоты. Так что вы, вероятно, можете исключить это и из декларации.

Answer 2

Разница в том, что браузеры по-разному обрабатывают неправильные CSS.

Изменение

background-attachment:fixed

до

background-attachment:fixed;

Answer 3

Обычно для сайта с выравниванием по центру лучше всего использовать 2 фоновых изображения. 1 фоновое изображение помещается в ТЕЛО, а другой фон - в DIV, выровненный по центру.

Если тело не имеет полей, как в вашем примере, и ваш браузер меньше 1344 пикселей, вы больше не увидите фон тела. Чтобы убедиться, что в случаях, когда содержание короткое, нет никаких странных эффектов, вы также можете задать DIV минимальную высоту 100%.

Может быть, посмотрите на этот сайт, где также используется эта техника: http://www.prgs.nl/

Answer 4

как указано выше, попробуйте:

background-position: center;

и вставьте фрагмент HTML-кода, чтобы мы могли проверить его в Safari / Chrome.