0

First off, I'd like to say that I have found this thread: "background-size: cover" does not cover mobile screen.
I have read through the responses in that thread and have tried them, to no avail.

Here is what the browser version of the site looks like: http://i.imgur.com/dmNWq.jpg
And here is what the mobile version looks like: https://i.stack.imgur.com/FfvuX.png
(please bear with me, as I cannot post images due to having low rep.)

Relevant CSS:

.splash {
  z-index: 1;
  list-style: none;
  margin: 0px;
  padding: 0px;
  background: url('../assets/splash.png') no-repeat center center fixed;
  background-color: #159957;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  min-height: 100%;
}

Basically the problem is that the image won't correctly size on mobile, even with the correct overrides in place. I do not know what path to take, and any help would be appreciated!

Community
  • 1
  • 1
Renerrix
  • 17
  • 4

1 Answers1

0

Instead of:

background: url('../assets/splash.png') no-repeat center center fixed;

you should use:

background: url("../assets/splash.png") no-repeat fixed center center / cover;

Why?

Because according to W3 if you want to include the background-size value in the shorthand syntax, you need to:

Explicitly include background-position values even if these are the same as the defaults (see above).

Write background-position values before background-size values.

Put a slash in between these two pairs of values because without it we cannot distinguish which values are for which

aleksandar
  • 2,399
  • 2
  • 14
  • 22