I need the background not to be clipped, but proportionally reduced at lower screen resolutions.

Naturally, I want to achieve this with styles, but background-size: cover; does not help ..

example here

 .cover { background: url(http://placehold.it/1920x1080) no-repeat; background-size: cover; width: 100%; height: 1080px; } 
 <div class="cover"></div>

    1 answer 1

    Maybe so?

     * { padding: 0; margin: 0; } .cover { background: url(http://placehold.it/1920x1080) no-repeat; background-size: cover; padding-top: 56.25%; /* 1080px/1920px = 0.5625 */ } 
     <div class="cover"></div>

    • Yes, thanks, it helped! Although why it would seem so unobvious replacement of height for padding & - Vasya