<div class="wrapper">
<div class=upper>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
.wrapper {
width: 500px;
}
.upper {
display: flex;
width: 100%;
align-content: stretch;
background-color: pink;
}
.content {
backgroun-color: yellow;
display: flex;
width: 100%;
align-content: stretch;
}
.content div {
width:100%;
text-align: center;
border: 1px red solid;
height: 100px;
}
.upper div {
background-color: green;
width:100%;
margin: auto;
height:100px;
background: url(http://dev.hozmagkomi.ru/Templates/__content/slider_top/3.png) no-repeat center;
background-size: cover;
text-align: center;
}
.upper :first-child {
background: url(http://dev.hozmagkomi.ru/Templates/__content/slider_top/1.png) no-repeat center;
background-size: cover;
}
.upper :last-child {
background: url(http://dev.hozmagkomi.ru/Templates/__content/slider_top/2.png) no-repeat center;
background-size: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.