شرح خاصية css background
خاصية background هي خاصية CSS تستخدم لتحديد الخلفية (الخلفية) لعنصر HTML.
تتضمن خاصية background العديد من القيم التي يمكن استخدامها لتحديد مظهر خلفية العنصر، بما في ذلك:
background-color: يستخدم لتحديد لون خلفية العنصر.background-image: يستخدم لتحديد صورة خلفية للعنصر.background-repeat: يستخدم لتحديد كيفية تكرار صورة الخلفية.background-position: يستخدم لتحديد موضع الصورة الخلفية داخل العنصر.background-size: يستخدم لتحديد حجم الصورة الخلفية.background-attachment: يستخدم لتحديد ما إذا كان يجب تثبيت صورة الخلفية أو تتحرك مع تمرير الصفحة.
مثال:
div {
background-color: yellow;
background-image: url("background-image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
هذا التعليمات البرمجية سيجعل خلفية عنصر div تتكون من لون أصفر وصورة خلفية تسمى “background-image.jpg” موضوعة في المنتصف دون تكرار وبحجم يغطي العنصر بأكمله، ويتم تثبيت الصورة الخلفية على الشاشة (لا تتحرك) عند تمرير الصفحة.
يمكن استخدام خاصية background لتحديد الخلفية لأي عنصر HTML، بما في ذلك body و div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
شرح خاصية background-color
خاصية background-color هي خاصية CSS تستخدم لتحديد لون خلفية عنصر HTML.
يمكن استخدام خاصية background-color لتحديد لون خلفية لأي عنصر HTML، من خلال تحديد قيمة لونية أو اسم لون معين. تتضمن القيم المقبولة لخاصية background-color الأسماء الأساسية للألوان مثل الأسود (black) والأبيض (white) والأحمر (red) والأزرق (blue) والأخضر (green) والأصفر (yellow) والرمادي (gray) والأرجواني (purple) والبني (brown) والبرتقالي (orange) وغيرها الكثير. يمكن أيضًا استخدام القيم المحددة بالRGB أو الHEX لتحديد لون محدد.
مثال:
body {
background-color: lightblue;
}
هذا التعليمات البرمجية سيجعل لون خلفية صفحة HTML يتغير إلى اللون الأزرق الفاتح.
يمكن استخدام خاصية background-color لتحديد لون خلفية لأي عنصر HTML، بما في ذلك div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
شرح خاصية background-image
خاصية background-image هي خاصية CSS تستخدم لتحديد صورة خلفية لعنصر HTML.
يمكن استخدام خاصية background-image لتحديد صورة خلفية لأي عنصر HTML، من خلال تحديد مسار الصورة المراد استخدامها. يمكن تحديد المسار باستخدام عنوان URL للصورة أو اسم الملف الخاص بالصورة.
مثال:
div {
background-image: url("background-image.jpg");
}
هذا التعليمات البرمجية سيجعل صورة خلفية لعنصر div تسمى “background-image.jpg” يتم تحميلها وعرضها كخلفية للعنصر.
يمكن استخدام خاصية background-image لتحديد صورة خلفية لأي عنصر HTML، بما في ذلك body و div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
يمكن استخدام مزيج من القيم لخاصية background-image مع خاصيات أخرى مثل background-repeat و background-position و background-size لتحديد كيفية ظهور الصورة الخلفية، مثل تكرار الصورة أو تحديد موضعها أو تحديد حجمها.
شرح خاصية background-repeat
خاصية background-repeat هي خاصية CSS تستخدم لتحديد كيفية تكرار صورة خلفية لعنصر HTML.
يمكن استخدام background-repeat لتحديد ما إذا كان يجب تكرار صورة الخلفية عبر العرض و/أو الارتفاع للعنصر، وهي تتضمن القيم التالية:
repeat: يتم تكرار الصورة في كل اتجاه (أفقيًا وعموديًا).repeat-x: يتم تكرار الصورة فقط على محور الأفقي.repeat-y: يتم تكرار الصورة فقط على محور العمودي.no-repeat: لا يتم تكرار الصورة.
مثال:
div {
background-image: url("background-image.jpg");
background-repeat: repeat-x;
}
هذا التعليمات البرمجية سيجعل صورة خلفية لعنصر div تسمى “background-image.jpg” يتم تكرارها فقط على محور الأفقي.
يمكن استخدام خاصية background-repeat لتحديد كيفية تكرار صورة الخلفية لأي عنصر HTML، بما في ذلك body و div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
يمكن استخدام مزيج من القيم لخاصية background-repeat مع خاصيات أخرى مثل background-position و background-size لتحديد كيفية ظهور الصورة الخلفية، مثل تحديد موضعها أو تحديد حجمها.
شرح خاصية background-position
خاصية background-position هي خاصية CSS تستخدم لتحديد موضع الصورة الخلفية داخل عنصر HTML.
يمكن استخدام background-position لتحديد موضع الصورة الخلفية بالنسبة للعنصر، وهي تتضمن القيم التالية:
- قيمة محددة بالبكسل (px) أو النسبة المئوية (%): تحديد موضع بالمقاسات المحددة.
- الكلمات الرئيسية:
topوbottomوleftوrightوcenter: تحديد موضع الصورة بالنسبة لحواف العنصر أو الوسط.
يمكن استخدام كلمتين رئيسيتين معًا لتحديد موضع الصورة في الاتجاهين الأفقي والعمودي، على سبيل المثال top left أو center bottom.
مثال:
div {
background-image: url("background-image.jpg");
background-position: center;
}
هذا التعليمات البرمجية سيجعل صورة خلفية لعنصر div تسمى “background-image.jpg” توضع في الوسط الأفقي والعمودي للعنصر.
يمكن استخدام خاصية background-position لتحديد موضع الصورة الخلفية داخل أي عنصر HTML، بما في ذلك body و div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
يمكن استخدام مزيج من القيم لخاصية background-position مع خاصيات أخرى مثل background-repeat و background-size لتحديد كيفية ظهور الصورة الخلفية داخل العنصر.
شرح خاصية background-size
خاصية background-size هي خاصية CSS تستخدم لتحديد حجم الصورة الخلفية داخل عنصر HTML.
يمكن استخدام background-size لتحديد حجم الصورة الخلفية بالنسبة للعنصر، وهي تتضمن القيم التالية:
- قيمة محددة بالبكسل (px) أو النسبة المئوية (%): تحديد حجم الصورة بالمقاسات المحددة.
- الكلمات الرئيسية:
autoوcoverوcontain: تحديد حجم الصورة بناءً على حجم العنصر وموقعها داخله.
قيمة cover تجعل الصورة تغطي كامل العنصر دون تشويه النسب. أما قيمة contain فتجعل الصورة تتناسب بشكل صحيح مع حجم العنصر دون تشويه النسب.
مثال:
div {
background-image: url("background-image.jpg");
background-size: cover;
}
هذا التعليمات البرمجية سيجعل صورة خلفية لعنصر div تسمى “background-image.jpg” تغطي كامل العنصر دون تشويه النسب.
يمكن استخدام خاصية background-size لتحديد حجم الصورة الخلفية داخل أي عنصر HTML، بما في ذلك body و div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
يمكن استخدام مزيج من القيم لخاصية background-size مع خاصيات أخرى مثل background-repeat و background-position لتحديد كيفية ظهور الصورة الخلفية داخل العنصر.Like
شرح خاصية background-attachment
خاصية background-attachment هي خاصية CSS تستخدم لتحديد ما إذا كان يجب تثبيت صورة الخلفية داخل عنصر HTML أثناء تمرير الصفحة.
يمكن استخدام background-attachment لتحديد ما إذا كانت صورة الخلفية يجب أن تكون ثابتة أثناء تمرير الصفحة أو تتحرك مع التمرير. وهي تتضمن القيم التالية:
scroll: يتحرك خلفية العنصر مع التمرير.fixed: يبقى الخلفية ثابتة في مكانها أثناء التمرير.local: يجعل الخلفية تتحرك مع العنصر نفسه.
مثال:
div {
background-image: url("background-image.jpg");
background-attachment: fixed;
}
هذا التعليمات البرمجية سيجعل صورة خلفية لعنصر div تسمى “background-image.jpg” تبقى ثابتة في مكانها أثناء التمرير.
يمكن استخدام خاصية background-attachment لتحديد ما إذا كانت صورة الخلفية يجب أن تكون ثابتة أو تتحرك مع التمرير داخل أي عنصر HTML، بما في ذلك body و div و section وغيرها. يمكن استخدام هذه الخاصية لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية للمستخدمين.
يمكن استخدام مزيج من القيم لخاصية background-attachment مع خاصيات أخرى مثل background-position و background-size و background-repeat لتحديد كيفية ظهور الصورة الخلفية داخل العنصر.
اختبار css background
اضغط على start التي في منتصف الاختبار لبدء الاختبار
