اذا كانت صورة في نفس المجلد الذي يوجد به ملف HTML كما في المثال الاول نكتب اسم الصورة / ثم امتداد الصورة (jpg, png, gif .....).
body { background-image:url(image_de_fond.png); }
اذا كانت صورة داخل مجلد كما في المثال الثاني نكتب اسم المجلد / ثم اسم الصورة / ثم امتداد الصورة (jpg, png, gif .....).
body { background-image:url(images/image_de_fond.png); }
لعدم تكرار الصورة داخل العنصر نضع
body { background-image:url(images/image_de_fond.png);
background-repeat: no-repeat; }
اما اذا اردت الصورة ان تتكرر
body { background-image:url(images/image_de_fond.png);
background-repeat: repeat; }
ونقوم بتكرارها على اليمن
body { background-image:url(images/image_de_fond.png);
background-repeat: repeat-x; }
ويقوم بتكرارها على اليسار
body { background-image:url(images/image_de_fond.png);
background-repeat: repeat-y; }
كما يمكن التحكم في وضعية الصورة من خلال
body { background-image:url(images/image_de_fond.png);
background-position: 30px 20px; }
القيمة 30px من اليسار و 20px من اليمين
مسموح بنقل الموضوع بشرط ذكر المصدر :
الدرس الخامس : عمل صورة بدل التدرج لعناصر HTML ب ال CSS
|
مكتبتي حياتي
