اريد مثل هذا

اريد ايطار حول الفئات والاقسام حول هذا ولكم الشكر

اين انتم اريد حل انجدوني اريد الكود ايطار بشكل جميل

الكود:

<div class="backimage">
<div class="first-image"></div>
<div class="second-image"></div>
</div>
<div class="side-image"></div>
<div class="side-image1"></div>
<style>
.first-image {
width: 0px; // عرض الصورة اليمين
height: 0px; // عرض الصورة اليسار
background: url('صورة') repeat-x; // في هذا الفراغ تضع الورة استعملنا خاصية عم التمديد في ناحية اكسس واحد فقط :)
float: right;

}
.second-image {
width: 0px; // عرض الصورة اليمين
height: 0px; // عرض الصورة اليسار
background: url('صورة') repeat-x;
float: left; // استعملنا نفس الخاصية التي بالآعلى لكن جعلناه يتجه لليسار
}
.backimage {
width: 100%; // القيمة ثابتة هنا لتجعل من الصورة الممتدة تسواي مئة
height: 0px; // عدل الطول هنا فقط
background: url('صورة') repeat-x;
}
.side-image {
padding-right: 44px; // قيمة ثابتة لآ تتغير
background: url('صورة') no-repeat right; // لآ تعطه تمديد لآنه سوف يتمدد
background-repeat: repeat-y; // مدده من ناحية القيمة واي اي بالعرض
}
.side-image1 {
height: 100%;
padding-left: 59px;
background: url('صورة') no-repeat left;
background-repeat: repeat-y;
}
.backimage-image1 {
width: 100%;
height: 0px;
background: url('صورة')  repeat-x;
background-repeat: repeat-y;
}
.first-image1 {
width: 0px;
height: 0px;
background: url('صورة')  repeat-x;
background-repeat: repeat-y;
}
.second-image1 {
width: 0px;
height: 0px;
background: url('صورة')  repeat-x;
background-repeat: repeat-y;
}
</style>
// الجزء السفلي يبددأ من هنا
<div class="backimage1">
<div class="first-image1"></div>
<div class="second-image1"></div>
</div>

سويت لك الكود الذي بالآعلى اتمنى انه يعمل وان لا يكون هنالك مشكلة فيه
تابع الخطوات الموجودة بالكود بعد // وإن لم تعلم كيفيفة تركيب الكود فقل لي سوف اشرحله لك بالتفصيل

لكن اعتقد انك سوف تفهفمه بما انك اسمك خبير اكواد   

تم الحذف 

اشكرك