تعلم اسياسيات 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 | تحديد كيفية تكرار صورة الخلفية |