Search code examples
cssmeta

meta viewport - how to show div's background in the same way on pc and mobile?

I have the meta viewport in my page:

<meta name="viewport" content="width=device-width, initial-scale=1">

And a background image in a div, I want to show the image in the same way on computer and mobile. The problem is, on mobile it is much bigger than computer like in the image below:

enter image description here

#mydiv{
 width:100%;
 height:150px;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 50% 50%;
 background-image:url(myurl.jpg);
}

any ideas how can my div have the same background size on computer and mobile without remove the meta viewport?

Solution

  • You can set the mobile height to be smaller. 

    @media (min-width: 400px) and (max-width: 768px) {  
    #mydiv{
        height:75px;
    }
}

    You can set as many sizes as you want to cover lots of size screens. Remember not all computer screens are the same size either.