شرح كل ما يخص الخلفية Background في Css

السلام عليكم في هذا الدرس ان شاء الله سنشرح خاصية الخلفية background 

background او الخلفية تتيح لك التغيير خلفية العنصر المحدد مثل (body;class;id;...) و لها مجموهة من الخواص اخرى اكثر تحديداً

background-color

تحدد خاصية background-color عنصر اللون
و يمكنك تحديد اللون من خلال
الاسم : مثل "blue"
قيمة HEX : مثل "#0000ff"
قيمة rgb : مثل "rgb(0, 0, 255)"

مثال :

h1 {
    background-color: green;}

div {
    background-color: #008000;}

p {
    background-color: yellow;}

شاهد بنفسك »

background-image

تمكنك خاصية "background-image" من اضافة صورة كخلفية
و يتم تكرار الصورة حتى تغطي العنصر باكمل

مثال :

body {
    background-image: url("paper.gif");}

شاهد بنفسك »

حاول استخدام صورة لا تأثر على المحتوى

background-repeat

خاصية "background-repeat" تسمح لك بتحكم في تكرار الصورة افقيا او عموديا ان سبق و استعمل الخاصية السابقة
يجب أن تتكرر بعض الصور فقط أفقيا أو رأسيا، أو أنها سوف تبدو غريبة، مثل هذا:

مثال :

body {
    background-image: url("gradient_bg.png");
}

شاهد بنفسك »

ولكن باستعمال الخاصية "background-repeat: repeat-x;" ستبدو افضل من المثال السابق

مثال :

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

شاهد بنفسك »

و لتكرار الصورة عموديا نستعمل الخاصية "background-repeat: repeat-y;"
و ان كنت تريد عدم تكرار الصورة من اي جانب نستعمل الخاصية "background-repeat: no-repeat;"

مثال :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

شاهد بنفسك »

"background-position" و "background-attachment"

الخاصية background-position : تسح لك بوضع الصورة في المكان خاص
و يمكنك تحديد المكان بالاسم مثل يمين اعلى (right top) انظر المثال
او بالنسب المئوية مثل (50% 50%) يمكنك تغير القيم حتى تحصل على المكان المناسب لك
او تحريك الصورة باستعمال البيكسل (100px 100px)
ثلات طريقة تؤدي نفس الغرض ولكن من الافضل استعمال الطريقتين الالى و ثانية

مثال :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

شاهد بنفسك »

الخاصية background-attachment : تسمح لك بتثبيت مكان الصور

مثال :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;}

شاهد بنفسك »

background

خاصية background : تسمح لك باختزال كل الخواص السابقة

مثال :

body {
    background: #ffffff url("img_tree.png") no-repeat right top;}

شاهد بنفسك »