Browsers with SVG Background support can also do Multiple Backgrounds

April 25, 2015 , ,

In a pro-tip from Ben Schwarz from germanforblack.com, we found a nice feature that can make you save a lot of time: All browsers that support SVG background images also supports multiple background images.

.module { background: url(‘logo.png’); background: none, url(‘logo.svg’); }

Basically, what’s going on here is older browsers will use the initial background declaration, ignoring the second, and browsers supporting multiple backgrounds will use the second, with the svg image. Clever use of none to force multiple background usage.

Bonus points for discovering this technique doesn’t create two HTTP requests, as it may seem.