CSS Magic: Split background image into multiple divs

Overview

Not widely known, but you can use pure CSS to split background image into several divs quite easily! I’ll teach you how.

strip-pic

Split Background Image

The HTML for this example is very simple:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#mosaic_wrapper {
width: 960px; /* (panel_height+panel_margin*2)*panels per row = (100px+(10px*2))*8 */
}

#mosaic_wrapper .panel {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: url('/media/mybackground.jpg') no-repeat 0 0 fixed;
}
</style>
</head>
<body>
<div id="mosaic_wrapper">
<div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
<div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
<div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
</body>
</html>

the actual “row” divs (the empty that breaks the divs into 3 groups) is not actually needed. they’re there only to maintain readability. and you can remove them safetly.

If you need to center align the whole wrapper, just add

1
margin: 0 auto;

to the #mosaic_wrapper and change the

1
...no-repeat 0 0

to

1
no-repeat top center

in the background property.

That’s it.

Development Specialist, Artist and Activist
Personal Website

Leave a Reply

Your email address will not be published.

*