As we all know, using background-size: cover makes the background-image automatically scale perfectly on the browser’s viewport.
Although, if we apply it on a DIV that has a smaller size, say for example 100x100px, the image will still scale, not based on the container DIV but on the total browser’s viewport, resulting in showing only part of the image.
Is there any workaround for this, without considering background-size: 100% 100%, which doesn’t really scale it by maintaining the proportions?
The background-size: cover is very useful to have a simple resize on the fly without using JS or either server side modifications.
Thanks in advance.
Copy of comment so poster can accept:
Try not using fixed 🙂 jsfiddle.net/vnMeK
Note that not all browser support this, there is a semi working filter for IE.