How to improve branding, which moves down by one pixel?

Hi all.

Faced with the problem that branding (background image) slides one pixel to the right in the chrome/edge and to the left in firefox. The project will use adaptive layout on the framework Foundation. A hole branding 1200 pixels, width 1200 caps (i.e., everything should be fine).

Chrome/edge

c46626f99f534d278224989cec19c415.png

Firefox

b4e85ed63eaa463eb82bc9f175b93a13.png

Css code:

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


Could suggest a solution to this situation?
July 4th 19 at 23:24
3 answers
July 4th 19 at 23:26
Solution
Can the background picture of the menu a little? And it is less than 1 pixel than necessary
Hi. No there is exactly 1200 pixels - there is even in the pictures it is evident that there is a shift (one place, one pixel is not enough, and in the other it comes out). And if you change the scale, it then rises to the center then shifted. - Shanie_Armstrong98 commented on July 4th 19 at 23:29
And there is no background image, and html/css go with the shading of the background. - Shanie_Armstrong98 commented on July 4th 19 at 23:32
July 4th 19 at 23:28
Solution
and where the prescribed dimensions that should make the background image? background-size:cover; try.
July 4th 19 at 23:30
Solution
1. You have in the code:
for #branding_img padding-right: 1px
custome.css (line 32).

2. :
Open the website on the screen of 1920 pixels in full screen.
Look in the inspector, we see that the width of the body turned out 1903 points, no matter in chrome or in FF. The background image has a white center 1200 pixels.
Of odd numbers subtracting even = odd we get.
And we need even to fields on both sides of the picture were the same.
Respectively the extra point the browser to go wherever he wants at his discretion.
It was a crutch for chrome so display it well. - Shanie_Armstrong98 commented on July 4th 19 at 23:33
: okay, finished the explanation in response. - Shanie_Armstrong98 commented on July 4th 19 at 23:36
: It can somehow be avoided, or only method (a full-sized picture and white background of the site) ? - Shanie_Armstrong98 commented on July 4th 19 at 23:39
: Geometry can not be avoided )))))))))))

I would finish the inside of the white rectangle 1 pixel in the picture and nobody would have noticed. (Or Yes, the whole picture, as advised above, if she has one)
And Yes, the white background of the main unit.

Can JS'om to know the width of the body, if is odd, then adjust. But, in my opinion, it's not worth it.

You can divide the picture into 3 parts. 2 tetki and everything else, and aunts to position then separately. But then another calc to appear and a bunch of all sorts of problems, which is also impractical. - Elmer.Upt commented on July 4th 19 at 23:42

Find more questions by tags CSSHTMLLayout