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

Всем привет.

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

Chrome/edge

c46626f99f534d278224989cec19c415.png

Firefox

b4e85ed63eaa463eb82bc9f175b93a13.png

Код 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;
}


Могли бы подсказать решение данной ситуации?
  • Вопрос задан
  • 292 просмотра
Решения вопроса 3
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Может фоновая картинка меню маленькая? И она меньше на 1 пиксель чем нужно
Ответ написан
@devstudent
frontend-developer
а где прописаны размеры, которые должно принимать изображение фона? background-size:cover; попробуйте.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. У Вас в коде:
для #branding_img правый паддинг: 1px
custome.css (строка 32)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы