CODEWITHSUNDEEP
htmlcss
Tzu ng
Tzu ng

Reputation: 9244

background size cover only works with mobile in inline-style

I have weird problem with background-size:cover in CSS, since it only works in mobile when I specify as inline-styling, at least in iphone 5 mode of Chrome Dev Tool. Does anyone have the same problem ?

Upvotes: 2

Views: 296

Answers (2)

Carol McKay
Carol McKay

Reputation: 2424

I have found background-size: cover; to be problematic, I think you will find this for example works better:

 @media only screen
    and (max-device-width : 899px)
    {
        body #wrapper
        {
       -webkit-background-size: contain auto;
          -moz-background-size: contain auto;
          -o-background-size: contain auto;
          background-size: contain auto;
         }
    }



@media only screen
    and (min-device-width : 900px) and (max-device-width : 1900px)
    {
        body #wrapper
        {
         -webkit-background-size: contain auto;
          -moz-background-size: contain auto;
          -o-background-size: contain auto;
          background-size: contain auto;
        }
}


@media only screen
and (min-device-width : 1901px)
{
    body #wrapper
    {
     -webkit-background-size: 100% auto;
      -moz-background-size: 100% auto;
      -o-background-size: 100% auto;
      background-size: 100% auto;
    }
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

That might be any of the following reasons:

Reason 1: That might be the override problem.

Try to use !important:

div{
  background-size: cover !important;
}

Or do select the specific selector.

Reason 2: Another reason might be of cache.

Clear the cache from your mobile by using setting.

Upvotes: 1

Related Questions