3-col layout with left-right background images

by audetwebdesign

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="center">
        <img src="http://placekitten.com/400/200">
    </div>
    <div class="right"></div>    
</div>

CSS

.wrapper {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
.left, .center, .right {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
}
.center {
    width: 1%;
}
.left, .right {
    width: 50%;
}
.left {
    background-image: url(http://placekitten.com/4/100);
    background-repeat: repeat-x;
    background-position: left center;
}
.right {
    background-image: url(http://placekitten.com/10/100);
    background-repeat: repeat-x;
    background-position: left center;
}
.center img {
    display: block;
}