بسم الله الرحمان الرحيم
درووس تعليم لغة ال css
الخلفيات و الالوان
قد لاحظت في الدرس الماضي عندما قمنا باستخدام خاصية background-image
ان الصورة ظهرت متكررة على كامل الصفحة .
لمنع تكرار الصورة نستخدم خاصية background-repeat و هذه الخاصية لها عدة قيم
تاخذ اربعة قيم وهي no-repeat/x / y / repeat
repeat: background-repeat اي ان الصورة سوف تكرر
background-repeat :xاي ان الصورة تكرر افقيا
background-repeat :y اي ان الصورة تكرر عموديا
background-repeat :no-repeat اي ان الصورة لن تتكرر
لناخذ هذه الأمثلة التالية:
body {
background-color: #FFCC66;
background-image: url("تضع هنا عنوان url للصورة/butterfly.gif"). ;
background-repeat :no-repeat;
}
p {
color: #990000;
background-color: #FC9804;
}
body {
background-color: #FFCC66;
background-image: url("تضع هنا عنوان url للصورة/butterfly.gif"). ;
background-repeat :y;
}
p {
color: #990000;
background-color: #FC9804;
}
الصورة تكرر عموديا
body {
background-color: #FFCC66;
background-image: url("تضع هنا عنوان url للصورة/butterfly.gif"). ;
background-repeat :x;
}
p {
color: #990000;
background-color: #FC9804;
}
الصورة تكرر افقيا
body {
background-color: #FFCC66;
background-image: url("تضع هنا عنوان url للصورة/butterfly.gif"). ;
background-repeat :repeat;
}
p {
color: #990000;
background-color: #FC9804;
}
الصورة سوف تكرر
و بهذا نكون قد انهينا درس اليوم الى اللقاء في الدرس القادم لنكمل الالوان و الخلفيات
تكملة الدرس من هنا
