Search code examples
htmlcssbackground-imagebackground-size

background-size: cover only fits width

I have an "horizontal" image as background (it's 2048x1148).

I set background:url("") no-repeat scroll center top / cover and in desktop mode everything is ok. In mobile though I can't get the background-image to scale and automatically cover the height. Shouldn't background-size:cover do it automatically?

Mobile view Desktop view

Here's the live site.

Solution

  • Make your page cover the hole viewport:

    html, body{
   height: 100%;
}

    or use min-height.