استخدام الخلفيات Background : لغة CSS و HTML

استخدام الخلفيات Background في درس بسيط جدا. تخيل أنك أنشأت علامة HTML تحتوي على بيانات معينة وتريد إرفاق صورة بها. ستختار الصورة المناسبة لهذه العلامة وهذا ما سنفعله باستخدام CSS.

 

تعريف

our div
{
  background:url('');
}

من أجل إنشاء صورة خلفية لعلامة HTML الخاصة بنا ، نضع عنوان URL للصورة التي نريد تنشيطها في الخلفية: url وسيتم عرض الصورة داخل حدود علامة HTML التي حددناها.

 

خصائص استخدام الخلفيات CSS

هناك عدة خصائص يجب مراعاتها عند إضافة صورة خلفية وهي:

  • العرض والارتفاع: يوصى بتعيين حجم العرض أو الارتفاع الخاص بك.
  • النصوص: عند إضافة بعض علامات النص ، يُفضل إعطاء ألوان مختلفة لتظهر بوضوح شديد.

 

الاستخدامات

تُستخدم صور الخلفية بشكل متكرر في بعض أجزاء موقعنا على الويب ، وهي:

  • الصفحة الرئيسية: تستخدم العديد من المواقع صور الخلفية على الصفحة الرئيسية ، مما يعكس انطباعًا جميلًا للزوار.
  • الشبكة GRID: نحتاج إلى استخدام صور الخلفية عند استخدام الشبكة ، وتظهر كفاءة الصورة عالية جدًا عند استدعاء العناوين والمعلومات من قواعد البيانات.

 

مثال

من فضلك ، لفهم خلفية CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.background{
    width:400px;
    height:200px;

    float:left;
    background:url('https://www.lifewire.com/thmb/Jr8JLKAqhDSa4sobdYe7LX-0QA0=/774x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/surf-internet-url-henrik5000-e-getty-images-56fa7f855f9b5829867282a9.jpg');
    background-size:cover;
    border-radius:5px;

}


p{
    background-color:#D9D9D9;
    font-size:24px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS Background</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class="background">
            <p>Hello i am <a href="https://tajersys.com">tajersys.com </a>and i will show you how to use background in css</p>
        </div>

    </body>

</html>