Как поправить брендирование, которое съезжает на один пиксель?

Question

[Сергей Нижний Новгород]

Всем привет.

Столкнулся с проблемой, что брендирование (бекграунд изображение) съезжает на один пиксель вправо в chrome/edge и влево в firefox. В проекте использую адаптивную верстку на фреймворке Foundation. Дырка брендирование 1200 пикселей, ширина шапки 1200 (т.е. все должно быть отлично).

Chrome/edge



Firefox



Код css:

#branding_img {
    padding-top: 11.4rem;
    cursor: pointer;
    width: 100%;
    height: 900px;
    background-image: url(../imagination/backtoboys.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
}

Могли бы подсказать решение данной ситуации?

Comments

[iBird Rose]

картинка и ксс мало что могут сказать. тут другие блоки мешают. весь код нужен

[Сергей Нижний Новгород]

iBird Rose: А что именно надо? блок менюшки или боди?

[Максим]

залейте куда-нибудь сайт посмотреть

[Сергей Нижний Новгород]

Максим: redmajor.ru - можете глянуть.

[Максим]

Terras: clip2net.com/s/3Cn0UjA создайте лучше эту картинку БЕЗ этой области. а блоку .columns задайте backgroud: #fff и всё будет нормально

Answer 1

[Дима Паутов]

Может фоновая картинка меню маленькая? И она меньше на 1 пиксель чем нужно

Comments

[Сергей Нижний Новгород]

Привет. Нет там ровно 1200 пикселей - там даже на фотках видно, что идет смещение (в одно месте одного пикселя не хватает, а в другом оно вылезает). Причем если менять масштаб, то оно то встает в центр, то смещается.

[Сергей Нижний Новгород]

И там не фоновая картинка, а html/css идут с заливкой бекграунда.

Answer 2

[devstudent]

а где прописаны размеры, которые должно принимать изображение фона? background-size:cover; попробуйте.

Answer 3

[Ankhena]

1. У Вас в коде:
для #branding_img правый паддинг: 1px
custome.css (строка 32)

2. Terras:
Открываем сайт на экране 1920 точек на полный экран.
Смотрим в инспектор, видим: ширина body получилась 1903 точки, не важно в хроме или в ФФ. Фоновая картинка имеет белую серединку 1200 точек.
Из нечетного числа вычитаем четное = получаем нечетное.
А нам нужно четное для того, чтобы поля с двух сторон картинки были одинаковыми.
Соответственно лишнюю точку браузер может девать куда хочет по своему усмотрению.

Comments

[Сергей Нижний Новгород]

Это был костыль для хрома, чтобы в общем отображалось в нем неплохо.

[Ankhena]

Terras: хорошо, дописала объяснение в ответ.

[Сергей Нижний Новгород]

Ankhena W: Это можно как-то избежать или только методом Максим (цельная картинка и белый фон сайта) ?

[Ankhena]

Terras: Геометрию не избежать )))))))))))

Я бы дорисовала внутрь белого прямоугольник еще по 1 пикселю картинки и никто бы ничего не заметил. (Или да, целую картинку, как советовали выше, если она в имеется)
И да, белый фон основного блока.

Можно JS'ом узнавать ширину body, если нечетная, то корректировать. Но, по-моему, оно того не стоит.

Можно разделить картинку на 3 части. 2 тётьки и все остальное и тётек позиционировать потом отдельно. Но тогда еще calc появиться и еще куча всяческих заморочек, что тоже нецелесообразно.