CSS background-repeat
-
بشكل افتراضي الصورة في الخلفية يتم تكرارها repeated حتي تغطي العنصر كامل ويتم ذلك بشكل افقي horizontally وعمودي vertically. وبالتأكيد يوفر CSS إمكانيات للتحكم بشكل التكرار سواء افقي او عمودي بالإضافة الى إمكانية عدم التكرار وتحديد مكان الصورة.
طريقة الكتابة :
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
هذه القيم تم شرحها بالتفصيل في اخر الدرس
تمام حتي نفهم اكثر نطبق مثال عملي :
تمام نرجع للملف backgroundcolor وخلونا نتذكر الكود السابق الي كان:
<!DOCTYPE html>
<style>
div{
background-color: green;
opacity: 1;
font-size: 25px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
body
{
background-image: url("img/bg5.jpg");
}
</style>
<html>
<body>
<div>
<p> DIV1 Elements تطبيق الخلفية على</p></div>
<div>
<p> DIV2 Elements تطبيق الخلفية على</p></div>
<footer></footer>
</body>
</html>
شغل الصفحة وشوف النتيجة:
في هذا الكود إذا حاولت تكبر الصفحة اكيد بتشوف ان الخلفية تكررت
السبب في ذلك ان ما حددنا أي خصائص لطريقة عرض الخلفية وبالتالي يتم عرضها افتراضي بشكل متكرر.
تمام لنفرض ان المطلوب الغاء التكرار وعرض الصورة فقط، المطلوب منك في هذه الحالة فقط تعدل الكود الى
body
{
background-image: url("img/bg5.jpg");
background-repeat: no-repeat;
}
شغل الصفحة وبتشوف النتيجة:
لو حاولت تكبر او تصغر المتصفح ما بتغير اشي عند والسبب ان تم عرض الصورة بحجمه الحقيقي في الصفحة.
عرض الخلفية بشكل عمودي vertically
فقط المطلوب تعديل الكود الى:
body
{
background-image: url("img/bg5.jpg");
background-repeat: repeat-y;
}
يتم عرض الصورة هنا بشكل متكرر عمودي
عرض الخلفية بشكل افقي horizontally
فقط المطلوب تعديل الكود الى:
body
{
background-image: url("img/bg5.jpg");
background-repeat: repeat-y;
}
تحديد مكان الصورة CSS background-position
يمكن التحكم بمكان صورة الخلفية بحيث يمكن تحديد المكان
المثال التالي يتم تحديد مكان الخلفية في right bottom
body
{
background-image: url("img/bg5.jpg");
background-repeat: repeat-y;
background-position:right bottom;
}
CSS background-repeat Property
القيم المتوفرة في هذه الخاصية هي
| القيمة | الوصف |
| repeat | تتكرر صورة الخلفية عموديًا وأفقيًا بشكل افتراضي. |
| repeat-x | تتكرر صورة الخلفية أفقياً horizontally فقط |
| repeat-y | تتكرر صورة الخلفية عموديًا vertically فقط |
| no-repeat | لا تتكرر صورة الخلفية. سيتم عرض الصورة مرة واحدة فقط بحجمها الحقيقي |
| Space | تتكرر صورة الخلفية قدر الإمكان دون قص. يتم تثبيت الصورة الأولى والأخيرة على جانبي العنصر ، ويتم توزيع المسافة البيضاء whitespace بالتساوي بين الصور |
| round | تتكرر صورة الخلفية ويتم شدها لملء الفراغ (بدون فراغات) |
| initial | يعيّن هذه الخاصية إلى قيمتها الافتراضية. |
| inherit | يرث هذه الخاصية من عنصرها الأصلي parent |
اترك تعليقك