placeholder Collection of pieces preview
Published on
placeholder One background for multiple divs preview

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.

See the Pen One background for multiple divs by Ivan Bogachev (@sfi0zy) on CodePen.

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 cool.

See the Pen Flexible multi-panel background by Ana Tudor (@thebabydino) on CodePen.

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

Related posts

Pet projects

placeholder Muilessium preview
16  3 

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.