Site icon موقع Jabism

إضافة الخلفية في CSS

عبدالرحيم

🤹‍♀️ لون الخلفية

♦ إضافة الخلفية في CSS
في أحيان كثيرة نحب أن نغير لون الخلفية لصفحات الويب ، و لتحقيق ذلك، نستخدم أحد خواص  CSS  و هي :   background-color . و الطريقة طبعاً سهلة، تماماً مثل استخدام خاصية الألوان color .  بمعنى أنه يمكنك كتابة إسم اللون أو كتابته بترميز سداسي عشري أو استخدام طريقة RGB.

للإضافة  لون خلفية إلى صفحة الويب ، لا بد أن ندرجها داخل <body>. لأن <body> يمثل صفحة الويب بأكملها ! تذكر هذا جيِّداً  .

🎯 ركز على ملف CSS هذا بعناية فائقة:

 

1
2
3
4
5
6
/* سنشتغل على الشفيرة body , إذن ستشمل كل الصفحة */
body
{
    background-color: green; /* الخلفية ستكون خضراء */
    color: yellow; /* النص أصفر */
}

⚽️ هنا ستظهر نتيجة هذا الرمز:

 

نص أصفر على خلفية خضراء

👀 كما تلاحظ فإن كتابة النص بعد <body> أخذت  اللون الأصفر ، وجميع الفقرات <p>والعناوين  <h1> أخذت هذا اللون. كيف تَمَّ ذلك؟ و لماذا؟

أردت أن أغتنم هذه الفرصة لأتحدث إليكم حول هذا الموضوع. وتسمى هذه الظاهرة الميراث. أؤكد لك على الفور ، لا أحد ميت.

ال CSS والميراث

في CSS ، إذا قمت بتطبيق نمط على علامة ما ، فستتخذ جميع العلامات الداخلية نفس النمط.

انها في الواقع بسيطة وبديهية .فالعلامة <body> تحتوي، على علامات <p> للفقرة و <h1> للعناوين ، و أشياء أخرى كثيرة.

إذا قُمْتُ بتطبيق لون خلفية خضراء ولون نص أصفر على العلامة <body> ، فإن جميع عناويني  وفقراتي  ستحتوي أيضًا على خلفية خضراء ونص أصفر … هذه هي الظاهرة التي تسمى الميراث: نقول أن العلامات الموجودة داخل علامة أخرى “ترث” من خصائصها.

فائــدة:
من هنا يأتي إسم “CSS” ،  يعني « Cascading Style Sheets » أي « Feuilles de style en cascade » ، بمعنى:  « أوراق الأنماط المتتالية ». يتم توارث خصائص CSS في التّتالي:  إذا أعطيت نمطًا لعنصر ، فسيكون لكل العناصر الفرعية نفس النمط.
هذا يعني أنّ كُلَّ نص صفحتي على الويب سيُكتب بالضرورة باللون الأصفر؟

في الحقيقة ، ليس بالضرورة. إذا أردت لاحقاً أن تكون بعض الأسماء باللون الأزرق ، فسيكون لهذا النمط أولوية وستكون أسماؤك فعلاً باللون الأزرق. من ناحية أخرى ، إذا لم تشر إلى أي شيء خاص (كما فعلنا سابقًا) ، فسترث ألقابك اللون الأصفر.
معلومة أخرى يجب استعابها، في خصائص CSS، الوريث لا يشمل فقط  ما ذكرنا، بل يتعداها إلى أشياءٍ أخرى،  على سبيل المثال ، يمكنك المطالبة بخط عريض في العلامة <body> وستكون جميع عناوينك وفقراتها بالخط العريض.

مثال على الميراث مع العلامة <mark> يعتقد البعض أنه بإمكاننا فقط تغيير لون خلفية الصفحة. والحال أنه يمكننا تغيير خلفية أي عنصر: الأسماء ، الفقرات وبعض الكلمات … في هذه الحالة ، سوف تظهر مظللة (كما لو أننا وضعنا علامة عليها). مثال

هل تتذكر ، على سبيل المثال ، العلامة <mark> التي تتيح لك تمييز بعض الكلمات؟ لنستخدمها مرة أخرى هنا:

1
2
3
4
    <body>
        <font align="center"> <h1> هنا العنوان في الوسط </h1> </font>
<h2> هنا الكتابة تظهر في اليمين</h2>
  <p> أهلاً و<mark> مرحباً بكم </mark> في موقعي الجديد </p>      

 

افتراضياً ، يتم عرض النص على خلفية صفراء. ويمكنك تغيير هذا السلوك في CSS:

 

1
2
3
4
5
6
7
8
9
10
11
12
body
{
    background-color: green;
    color: yellow;
}
 
mark
{
    /* لون الخلفية له الأسبقية على الصفحة بأكملها*/
    background-color: black;
    color: green;
}

إضافة الخلفية في CSS

في نص العلامة <mark> ، يكون لون الخلفية الخضراء هو الذي ينطبق. في الواقع ، حتى لو كان الجزء السفلي من الصفحة باللون الأسود ، فإن خاصية CSS هي العنصر الأكثر دقة الذي له الأولوية (الشكل التالي).

 

نص مظلل باللون الأسود على خلفية خضراء

ينطبق نفس المبدأ على جميع علامات HTML وخصائص CSS! إذا قلت:

سيذهب تفكيرك إلى وجود صراع حقيقي. فالنص المهم هو جزء من فقرة ، إذن ما الحجم الذي ستخصصه لها؟  هل 1.2 em  أو 1.4 em؟

 CSS يتدخل هنا ليقرر أن  أكثر العبارات دقة هي التي تفوز! وبما أن <strong> عنصر أكثر تحديداً من الفقرات ، فسيتم كتابتها بحجم 1.4 em.

صور الخلفية

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

تطبيق صورة الخلفية

 

للإشارة إلى صورة خلفية نستعمل الخاصية :  background-image  و ستعمل url “nom_de_l_image.png”  كقيمة  مثلا :

1
2
3
4
body
{
    background-image: url("crépuscule.jpg");
}

و هذه هي النتيجة:

 

صورة خلفية على الصفحة

أشير إلى أن امتداد صور الخلفية لا يقتصر على   JPG  بل يمكنك استعمال PNG أو GIF .
و عنوان الصورة يمكنك كتابته حسب تموقعها إما بهذا الشكل http://  أو فقط  image.jpg .

 

فائــدة:
⛳️كن حذراً عندما تكتب عنوان نسبي  على هذا الشكل ( image.jpg) مثلاً  في ملف CSS! يجب الإشارة إلى عنوان الصورة بالنسبة إلى ملف css. وليس مقارنته بملف html. لتبسيط الأشياء ، أنصحك بوضع صورة الخلفية في نفس المجلد الذي يتواجد به ملف css (أو في مجلد فرعي مع الاشارة اليه في الرابط).

 

الخيارات المتاحة لصورة الخلفية

يمكننا إكمال صورة background-image التي شاهدناها للتو من خلال العديد من الخصائص الأخرى التي يمكن أن تغير سلوك صورة الخلفية.

background-attachment :تثبيت الخلفية

تتيح لك خاصية   CSS استعمال background-attachment”تثبيت” الخلفية و تجميدها. هذا التأثير مثير للاهتمام لأننا سنرى النص “ينزل” إلى الأسفل. بينما الخلفية لا تتحرك.

و هناك قيمتان لصورة الخلفية:

ثابت: تظل صورة الخلفية ثابتة لا تتحرك.

التمرير: يتم تمرير صورة الخلفية مع النص ( و هاته القيمة افتراضية).

 

1
2
3
4
5
body
{
    background-image: url("crépuscule.jpg");
    background-attachment: fixed; /* الخلفية تكون ثابتة */
}

 

background-repeat : تكرار الخلفية
بشكل افتراضي ، صورة الخلفية تكون متكررة.  يمكنك تغيير ذلك باستخدام خاصية

مثال على الاستخدام:

1
2
3
4
5
body
{
    background-image: url("explosion.gif");
    background-repeat: no-repeat;
}

إقرأ أيضاً: إضافة صورة لخلفية في مقالة ووردبريس

background-position :   موضع الخلفية

يمكنك تحديد المكان الذي يجب أن تكون فيه صورة الخلفية عبر الرمز  background-position. هذه الخاصية لا تكون مثيرة للاهتمام إلا إذا تم دمجها مع background-repeat: no-repeat;  (خلفية لا تتكرر).

يجب عليك إعطاء لموضع الخلفية قيمتين بالبكسل للإشارة إلى موضع الخلفية بالنسبة للزاوية العلوية اليسرى من الصفحة (أو الفقرة ، إذا قمت بتطبيق الخلفية على فقرة). لذلك ، إذا كتبت:

 

1
background-position: 30px 50px;

 

 ستكون خلفيتك 30 بكسل من اليسار و 50 بكسل من الأعلى. من الممكن أيضًا استخدام هذه القيم باللغة الإنجليزية:

top :  إلى الأعلى ؛

bottom : إلى الأسفل.

left : إلى اليسار ؛

center : توسيط إلى المركز.

right : إلى اليمين.

من الممكن الجمع بين هذه الكلمات. على سبيل المثال ، لمحاذاة الصورة في أعلى اليمين ، ستكتب:

1
background-position: top right;

لذلك ، إذا كنت أرغب في عرض صورة الانفجار في الخلفية (الشكل التالي) ، إذا أردتَ  في نسخة واحدة تَسْتعملُ no-repeat ، إذا أردتها أن تكون  مرئية دائمًا تستعمل  fixed  أو وضعها في أعلى اليمين نستعمل  top right، فإننا نكتب :

 

1
2
3
4
5
6
7
body
{
    background-image: url("explosion.gif");
    background-attachment: fixed; /* الخلفية تبقى ثابتة */
    background-repeat: no-repeat; /* الخلفية لن تتكرر */
    background-position: top right; /* الخلفية ستكون في أعلى اليمين */
}

إضافة الخلفية في CSS

انفجار يوضع في صورة الخلفية في أعلى اليمين

الجمع بين الخصائص

إذا كنت تستخدم الكثير من الخصائص المتعلقة بالخلفية (كما هو الحال في هذا المثال الأخير) ، يمكنك استخدام خاصية background التي يمكن أن تجمع قيمتها بين العديد من الخصائص التي تمت مشاهدتها سابقًا:

background-image ،

  background-repeat، 

background-attachment background-position.

لذلك يمكننا ببساطة كتابة:

 

1
2
3
4
body
{
    background: url("explosion.gif") fixed no-repeat top right;
}

إضافة الخلفية في CSS

ما يجب معرفته لحد الآن هو أن :

عدة صور الخلفية

 مـع CSS3 ، من الممكن إعطاء عدة صور خلفية لعنصر. لذلك ، يكفي فصل التصريحات بفاصلة ، مثل هذا:

1
2
3
4
body
{
    background: url("explosion.gif") fixed no-repeat top right, url("crepuscule.jpg") fixed;
}

سيتم وضع الصورة الأولى من هذه القائمة في الترتيب الأول  (الشكل التالي).

كن حذراً ، يعد ترتيب إعلان الصور أمراً مهماً: إذا عَكَسْتَ الانفجار  والغروب في كود CSS السابق ، فلن ترى الافجار بعد الآن! لأن الغروب سيخفيه.

 

صور خلفية متعددة

لاحظ أن صور الخلفية المتعددة تعمل على جميع المتصفحات باستثناء الإصدارات القديمة من Internet Explorer ، والتي تتعرف فقط على هذه الميزة من الإصدار 9 (IE9).

إضافة الخلفية في CSS

 قبل الانتهاء من صور الخلفية عليك أن تعرف أمراً مهماً:

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

أتمنى لك التوفيق 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
Exit mobile version