الاثير الاثير
recent

آخر الأخبار

recent
جاري التحميل ...

كود عدم تكرار الخلفية html وتنسيقه بشكل متناسب css


تعلم اسياسيات html 
أقدم لكم كود حصري جداااً ..

لجعل صورة الخلفية للصفحة تتناسب مع حجم الشاشة بتقنية [ Css3 ] 
فيجعل الصورة تظهر كاملة و تملاء الشاشة للتتناسب مع حجم المتصفح او مقاس الشاشة لديك ..
* يجعل الكود ايضاً الخلفية ثابتة لا تتأثر بحركة المحتوى نزولاً او صعوداً ..



طريقة جعل خلفية المدونة تظهر بحجم كامل على جميع الشاشات


تنسيق الخلفية css



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

عن الكاتب

alathir shw

التعليقات


اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

الاثير