ما هي background ؟
اليوم سنكمل الجزء الثاني من background اذا لم تتابع الجزء الاول شوفه وأرجع لهذا الثريد
اليوم الرابع عشر في #100DaysOfCode
#ثريد
اليوم سنكمل الجزء الثاني من background اذا لم تتابع الجزء الاول شوفه وأرجع لهذا الثريد
اليوم الرابع عشر في #100DaysOfCode
#ثريد
اليوم سنتعرف على خصائص :
Attachment & position & size
background-attachment :scroll ;
وهي القيمة الإفتراضية ويعني اذا وضعت صورة ستبقى في الاعلى ولن تنزل معك اذا عملت scroll لتحت
Attachment & position & size
background-attachment :scroll ;
وهي القيمة الإفتراضية ويعني اذا وضعت صورة ستبقى في الاعلى ولن تنزل معك اذا عملت scroll لتحت
بينما
background-attachment : fixed ;
الصورة التي وضعتها سوف تنزل معك لما تعمل scroll لتحت
background-position : هنا نكتب الاتي ;
هي مكان ذهاب الصورة بالصفحة ( تحريك الصورة )
background-attachment : fixed ;
الصورة التي وضعتها سوف تنزل معك لما تعمل scroll لتحت
background-position : هنا نكتب الاتي ;
هي مكان ذهاب الصورة بالصفحة ( تحريك الصورة )
يوجد 3 طرق للتحريك :
1- بالبكسل 20px 20px
2- بالنسبة المئوية 50% 50% هنا تأتي بالمركز
3- بالاتجاهات وهي:
left top , left bottom , left center , right top , right bottom , right center , center center , center top , center bottom
ولو ما كتبت القيمة الثانية يعتبرها مركز
1- بالبكسل 20px 20px
2- بالنسبة المئوية 50% 50% هنا تأتي بالمركز
3- بالاتجاهات وهي:
left top , left bottom , left center , right top , right bottom , right center , center center , center top , center bottom
ولو ما كتبت القيمة الثانية يعتبرها مركز
ملاحظة :
لما تكتب بالنسبة المئوية او البكسل فإن اول قيمة تكون الأفقي والقيمة الثانية تكون عامودي
40px 60px;
40% 60% ;
لما تكتب بالنسبة المئوية او البكسل فإن اول قيمة تكون الأفقي والقيمة الثانية تكون عامودي
40px 60px;
40% 60% ;
background-size : auto ;
يعني بحجمها الطبيعي وهي القيمة الإفتراضية
background-size : cover ;
الصورة بتغطي المحتوى كاملا وممكن تتقطع جزء من الصورة عند التكبير والتصغير
يعني بحجمها الطبيعي وهي القيمة الإفتراضية
background-size : cover ;
الصورة بتغطي المحتوى كاملا وممكن تتقطع جزء من الصورة عند التكبير والتصغير
background-size : contain ;
الصورة بتملئ المحتوى لكن بتضل ظاهرة كاملة بدون ان ينقطع جزء من الصورة عند التكبير والتصغير
ومثل ما عملنا ب position بقدر اعمل هنا نفس الشيء حدد حجم الصورة سواء بالكسل px او بالنسبة المئوية %
الصورة بتملئ المحتوى لكن بتضل ظاهرة كاملة بدون ان ينقطع جزء من الصورة عند التكبير والتصغير
ومثل ما عملنا ب position بقدر اعمل هنا نفس الشيء حدد حجم الصورة سواء بالكسل px او بالنسبة المئوية %
وفي النهاية شكرا لكم
لا تنسوا اللايك ورتويت ليستفيد غيرك 🌹
لا تنسوا اللايك ورتويت ليستفيد غيرك 🌹
جاري تحميل الاقتراحات...