CODEWITHSUNDEEP
css
TacoCat
TacoCat

Reputation: 469

Background image not showing in some phones

Everything works fine for some phones, but when I tested it for example on HTC the background image isn't showing.

CSS

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/lets-get-down-to-business.jpg);
  background-size: cover;
  height: 100vh;
  background-position: center;
}

and the only query that touches the BG image

@media only screen and (max-height:600px){
  header {
    height: 600px;   
  }
}

Any help would be appreciated with explanation.

Thank You!

Upvotes: 3

Views: 65

Answers (1)

Jacob Margason
Jacob Margason

Reputation: 622

I would guess that this is because whatever browser you are using on the HTC does not support the linear-gradient CSS function.

Gradients compatibility - mobile

It seems to me that the stock android browser doesn't support this yet.

That's where I would start though, you might be able to just change the syntax a little and get it to work.

Upvotes: 1

Related Questions