تعلم اسياسيات html
أقدم لكم كود حصري جداااً ..
لجعل صورة الخلفية للصفحة تتناسب مع حجم الشاشة بتقنية [ Css3 ]
* فيجعل الصورة تظهر كاملة و تملاء الشاشة للتتناسب مع حجم المتصفح او مقاس الشاشة لديك ..
* يجعل الكود ايضاً الخلفية ثابتة لا تتأثر بحركة المحتوى نزولاً او صعوداً ..
طريقة جعل خلفية المدونة تظهر بحجم كامل على جميع الشاشات
يوضع الكود بين <head> و </head> داخل وسم <style> مع تغير مسار الصورة
body {
background-image: url(img/hh.jpg) ;
background-repeat : no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
تستخدم قاعدة background-image لتحديد صورة خلفية
تستخدم قاعدة background-repeat : no-repeat ستؤدي إلى عدم تكرار صورة الخلفية الخلفية
background-image، أي أنها ستعرَض مرةً واحدةً فقط.تستخدم خاصية background-position لضبط موضع الصورة
تستخدم قاعدة background-attachment: fixed لتحديد موضع الصورة ثابثا
الخاصية background-size تستعمل لتحديد حجم صورة الخلفية. قيمة cover ليتم إعادة تشكيل حجم الصورة لتأخذ كل مساحة العنصر .
كما تلاحظ يمكننا جمع جميع الخصائص بخصيصة واحدة ولكن يجب الانتباه الى أن وضع القيم يجب أن تكون مرتبة كما يلي تماماً كما سيتم ترتيبهم حسب الخصائص كالتالي :
- لون الخلفية / background-color
- صورة الخلفية / background-image
- تكرار الخلفية / background-repeat
- مرفقات الخلفية / background-attachment
| الخاصية | الوصف |
|---|---|
| background | يمكن ضبط جميع قيم الخلفيات بخاصية واحدة |
| background-attachment | تحديد صورة الخلفية سواء مثبتة أو متحركة إلى نهاية الصفحة |
| background-color | تحديد لون خلفية العنصر |
| background-image | تحديد صورة خلفية العنصر |
| background-position | تحديد بداية المكان لصورة الخلفية |
| background-repeat | تحديد كيفية تكرار صورة الخلفية |