So here’s a quick little trick I just learned today!
Lets say you have a single, really big background image that you want to resize with your page no matter what size it is. You don’t want it to repeat, because that would look awful, but you want to show as much of it as possible without stretching/compressing it.
An issue would crop up as soon as the aspect ratio of the background image didn’t match up with the dimensions of your browser window. So lets say you have background-size: 100%; This would make your image compress to fill 100% of the width of the browser, and either repeat or leave whitespace beneath it on height.
The ideal reaction would be to squeeze the image until this exact breakpoint (depending on the size of the image), and then just hide the rest.
It used to be super difficult, but with CSS3, it is super easy! Just use:
background-size: cover;
You will probably want to use the typical vendor prefixes for this, since it is CSS3. But there ya go! Pretty neat stuff!
