CSS: ограничить ширину элемента четными числами

Question

Мне было интересно: у меня есть фоновое изображение на сайте, над которым я работаю, которое должно быть очень точно расположено. В настоящее время его позиционирование:

 body {
    ...
    width: 100%
background-position-x: center;
background-position-y: -10px;
 }

Это работает довольно хорошо - по большей части изображение остается в центре по оси X, когда пользователь изменяет размер окна.

Однако, если пользователь изменяет размер окна до нечетной ширины пикселя (т. Е. Тело становится 1001px, а не 1000px), тогда фоновое изображение кажется немного смещенным (возможно, 1 пиксель?).

Как я могу это исправить? Нужно ли ограничивать ширину элемента четными числами / как мне это сделать? Может быть, решение JQuery для этого?

РЕДАКТИРОВАТЬ: сайт с именем Simplegeo https://simplegeo.com/ удается сделать это отлично. Обратите внимание на мозаичный фон: он сделан с повторяющимся png-файлом, и он всегда идеально расположен по отношению к элементам на странице. Это показывает, что это возможно ... но кто-нибудь знает, как они это сделали?

Answer 1

Этот веб-сайт использует фоновое изображение размером 20x20 пикселей (четное число).Вы можете использовать

body {
min-width:400px;
}

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

Я не совсемуверен в вашем вопросе, хотя.Вы говорите о элементе в вопросе, а не фоне.Будет полезно, если вы предоставите ссылку на свой сайт.

Answer 2

На мой взгляд, у вас есть два варианта:

1) Изменить размер окна пользователя до ближайшего четного числа (когда происходит изменение размера), что-то вроде http://jsfiddle.net/hATKW/

2) Используйте фиксированную ширину вместе с медиа-запросами для учета окон разных размеров, читайте о медиа-запросах здесь: http://css -tricks.com / 6731-css-media-запросы /

Спасибо, Лев