دروس دورة CSS : شرح الخاصية background

بسم الله , الحمد لله

في درسنا هذا سوف نتعلم الكثير حول خاصية background او الخلفية .
حيث ان هناك أكثر من طريقة لوضع الخلفيات داخل صفحات الإنترنت سواء كانت ألوان أو صور وطريقة التحكم في الصور وعرضها , ايضاً يمكنك وضع صورة واحدة وجعلها تتكرر سواء افقياً او رأسياً او ملئ الصفحة أكلمها.

لا تقتصر هذه الخاصية على الألوان والصور فقط, بل أن لها خصائص أخرى رُبما تعرفها لأول مرة وهذا ما سوف نستعرضه الآن سوياً ,, فنلبدأ درسنا على بركة الله .

ملاحظة هامة,, لرؤية صور الشرح بوضوح تام اضغط على الصورة مرة واحدة فقط.

و الآن سوف نقوم بعمل صفحة HTML كالتالي..
افتح اي محرر نصوص ويستحسن Notepad Plus وتجده بشرح التنصيب على هذا الرابط ( هنا )
ثم افتح صفحة جديد والصق بها التالي..

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body{
background-image: url('http://im41.gulfup.com/z16yp.png');
background-color: #B7FF0F;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
Mini Software
Mini Software
Mini Software
Mini Software
Mini Software
</body>
</html>

بعد نسخ هذه الصفحة في البرنامج ستجدها عبارة عن كتابة سوداء فافعل التالي

1- اضغط لإختيار اللغة
2- قف على حرف H
3- اختر html

اضغط هن للحفظ

ثم اعطي الملف اي اسم تريد مثل الرقم واحد
2- اضغط Save

ستجد الملف وقد أخذ شكل المتصفح الإفتراضي لديك

الان إفتح الملف وانظر كيف هو في المتصفح

ها هو الملف وقد فتح على المتصفح

وتعالو نفسر كيف تم هذا ,, انظر الكود التالي المستخدم في الصفحة التي قُمنا بحفظها

body{
background-image: url('http://im41.gulfup.com/z16yp.png');
background-color: #B7FF0F;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

هذا هو كود CSS الذي يسمى background يعني الخلفية
هذا يعني ان القادم هو رابط لصورة url ودائماً تكون بين قوسين ( )
هذا هو لون الصفحة الاخضر وهو عبارة عن لون من الوان الهيكس ولمعرفة المزيد اليك هذا الرابط به جميع الألوان ( هنا )
وهذا يعني عدم تكرار الصورة و سوف نأخذ المزيد حول هذه الخاصية
هذا يعني انه تم اصلاح رؤية الخلفية في اي منفذ عرض
وهذا يعني ان الصورة تكون في المنتصف تماماً و سوف نأخذ المزيد حول هذه الخاصية

هل يمكن كتابة نفس الكود بطريقة أخرى ؟ نعم يمكن كالتالي

background: #B7FF0F url('http://im41.gulfup.com/z16yp.png') no-repeat fixed center;

حسناً ,, الآن اخذنا فكرة كبيرة عن خاصية background ولكن بقى القليل و هو ,, إذا أردت أن اجعل الصورة متكررة في جميع انجاء الصفحة فيمكنك ان تمسح هذا الكود :

background-repeat: no-repeat;

او تجعله هكذا

background-repeat: repeat repeat;

لتبقى الخلفية هكذا