#header {
height: 213px;
background-image:url('التمدد');
background-repeat: repeat-x;
}
#header .right{
height: 213px;
width: 333px;
background-image:url('هيدر يمين');
float: right;
background-repeat: no-repeat;
}
#header .left {
height: 213px;
width: 434px;
float: left;
background-image:url('هيدر شمال');
}
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
#do {
height: 79px;
background-image:url('تمدد الفوتر');
background-repeat: repeat-x;
}
#do .right{
float: right;
height: 79px;
width: 126px;
background-image:url('فوتر يمين');
background-repeat: no-repeat;
}
#do .left{
float: left;
height: 79px;
width: 143px;
background-image:url('الفوتر شمال');
background-repeat: no-repeat;
}
#do .middle {
background-image:url('فوتر الوسط ليس من الضروري وضعه');
height:79px;
width: 257px;
margin-right: auto;
margin-left: auto;
}
<div id="do">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>