How can I fix CSS acting inconsistently between mobile emulator for Chrome on desktop and actual Chrome on mobile?

Question

When I use my site on Chrome for desktop emulating mobile, the layout is how I want it to be:

Link to image

However, when I actually run my website mobile (Chrome on android) it does not look the same:

Link to image

I'm not sure what's causing the issue, because it's using the same CSS for both.

I have a div element declared in my html with a class of header-image , and in my scss file I have:

.header-image {
  background: url('/assets/images/31163086090_fdac6a25c4_o.jpg') no-repeat fixed center;
  background-size: cover;
  background-position: 50% -30vh;
  height: 60vh;
}

The reason I'm inserting the image like this is because I want it to be still when I scroll down. Everything works exactly how I want it to on Chrome for desktop. Any suggestions?

Edit: You can see site here if you want to see what it looks like on your devices.

Answer 1

I cannot test it currently but it seems that you need to be fairly explicit in your style for the image.

This subject has been addressed on Stack Overflow where the individual wanted to keep the image consistent between the computer and mobile Chrome browsers. Take a look at this answer HERE .