JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="left"></div>
<div id="center"><img src="http://dentaliran.ir/back-final-mata.gif" width="100" /> </div>
<div id="right"></div>
</div>
CSS
div {
height: 100px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#left, #center, #right {
display: table-cell;
}
#center {
width: 60%;
}
#center img {
display:block;
margin:auto;
}
#left {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/MARPAT_woodland_pattern.jpg/50px-MARPAT_woodland_pattern.jpg) repeat-x;
}
#center {
background: url(http://3.bp.blogspot.com/-Q11tJy3fAhA/UUnEu5Q3BtI/AAAAAAAAFEQ/TPBl0Sd5V9I/s1600/dark-brown-wood-pattern.jpg) no-repeat center center;
background-size: cover;
}
#right {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/MARPAT_woodland_pattern.jpg/50px-MARPAT_woodland_pattern.jpg) repeat-x;
}