Ivan Bogachev

Creative frontend developer



One background for multiple divs

One background for multiple divs

I see a lot of frontend developers which are tempted to create monstrous solutions, even if they don’t need to. I’m not sure, if it happens because a lot of people don’t know basic CSS or they think it’s cool to do everything with WebGL, but it happens too often to be a coincidence. Todays demo is pretty simple, but it can show you how to split an image between multiple divs with pure CSS.

The Pen by Ivan Bogachev (@sfi0zy).

UPD: Ana Tudor created a more complex version of this effect for images of any aspect ratio. It also has parameters for panels. It may be hard to understand its logic, but it’s really really cool.

The Pen by Ivan Bogachev (@sfi0zy).

UPD: Check out the speed coding of this example on the FreeFrontend YouTube channel: