دروس دورة CSS : شرح الخاصية background-repeat دورة تعليمية حول css Educational course about css xml html css
اسعد الله اوقاتكم بكل خير
في دروسنا السابقة شرحنا الكثير حول خاصية background و اليوم معنا خاصية جديدة من هذه الخواص وهي بعنوان
background-repeatتلك الخاصية التي تجعلنا نتحكم في تكرار الصورة التي نضعها في الخلفية سواء رأسياً او افقياً او حتى ملئ الصفحة كلها , بالاضافة
وهذا ما سوف نتناوله اليوم في درسنا هذا فكونوا معنا واعطونا انتباهكم ..
كود background-repeat ينقسم منه اربعة خواص وهما كالتالي..
background-repeat: repeat; تكرار الصورة
background-repeat: no-repeat; عدم تكرار الصورة
background-repeat: repeat-x; تكرار الصورة افقياً
background-repeat: repeat-y; تكرار الصورة رأسياً
افتح صفحة text اعطيها الإمتداد html ثم ضع فيها هذا الكود :
<!DOCTYPE html>السطر الآزرق رابط الصورة , السطر الأحمر الخاصية التي نشرحها.
<html>
<head>
<style>
div{
background-image:url(http://im31.gulfup.com/KCsoG.png);
background-repeat:repeat;
border:2px solid #ccc;
width:260px;
padding:20px;
}
</style>
</head>
<body>
<div>
MiniSoftware<BR />By Ahmad Saleh<BR /><BR />
<BR /><BR /><BR /><BR /><BR /><BR />
</div>
</body>
</html>
الآن قُم بحفظ الصفحة وافتحها على اي متصفح وسوف تجد التالي ..
 |
| تكرار الصورة repeat |
وإذا أردنا أن نجعلها صورة واحدة فقط فاستبدل السطر الأحمر من الكود السابق بهذا الكود
background-repeat: no-repeat;لتبقى في المتصفح هكذا ..
 |
| عدم تكرار الصورة no-repeat |
background-repeat: repeat-x;لتبقى في المتصفح هكذا ..
 |
| تكرار الصورة افقياً repeat-x |
background-repeat: repeat-y;لتبقى في المتصفح هكذا ..
 |
| تكرار الصورة رأسياً repeat-y |
background-position: center;هذا الكود مشروح من ضمن دروس الدورة , فيمكنك استبدال centet بـ left او right كما الصورة التالية مثلاً
 |
| center & no-repeat |
وعليك أن تدرك ايضاً ان في لغة CSS الأكواد تكمل بعضها البعض وهذا ما سوف تدركه جيداً عندما تتعمق أكثر في هذه التقنية الأكثر من جميلة..
بهذا تم موضوعنا لهذا اليوم ,, في حفظ الله
التعليقات