Solution 1 :

You should be able to shave off the vendor prefixes, contain and cover have been well adopted for some time now.

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.

Problem :

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.


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.


Comment posted by minimal reproducible example

Instead of linking out to the site, could you include a