Overview
Not widely known, but you can use pure CSS to split background image into several divs quite easily! I’ll teach you how.
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