You should be able to shave off the vendor prefixes, contain and cover have been well adopted for some time now.
https://caniuse.com/?search=background-size
body {
background-image: url('../assets/headerbackground.jpg');
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
In addition to this, as a rule of thumb, I would remove the styling from the body tag and wrap the content of your site in something like <div id="app"> ... </div>. The <html> and <body> tags are rendered differently in each browser more than likely this is what is causing your site to display differently in separate browsers.
RMZ
I have a site that I used chrome developer tools to get working. However, when checking the site in Firefox, the background image is only viewable in a small strip in the middle of the page.
the code for my background image is the following:
body {
background-image: url(../assets/headerbackground.jpg);
min-height: 0px;
-webkit-background-size: 100vmax;
-moz-background-size: 100vmax;
-o-background-size: 100vmax;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
}
Any help would be appreciated. Not sure how to troubleshoot this.
UPDATE:
Found the solution to my problem: My <body> had elements that were making it sandwich between the header and footer. Removing those elements from <body> did the trick.
