Published on
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

ABCD - post preview
Five CSS tricks - post preview

Pet projects

Muilessium preview

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

Promo Core preview

Boilerplate for static promotional websites. Pug, LESS, PostCSS, ES6+, Gulp, Webpack, BrowserSync, ESLint, Stylelint, auto-generated docs...