CSS خلفيات متعددة

مفهوم الخلفيات المتعددة

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

كيفية وضع أكثر من صورة في الخلفية

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

للتذكير، خصائص الخلفيات هي background-image - background-repeat - background-size - background-position - background-attachment كما يمكنك استخدام الخاصية background التي تسمح لك بتحديد معظم خصائص الخلفيات بشكل مختصر.

في المثال التالي قمنا بوضع صورتين كخلفية للعنصر، مع تحديد خصائص ظهور كل واحدة منهما.

div {
    background-image: url(pyramids.png), url(paper.png);
    background-repeat: no-repeat, repeat;
    background-position: right center, left bottom;
    background-size: 70px 70px, contain;
}
        

هنا قمنا بإعادة المثال السابق مع تعريف خصائص الخلفتين بشكل مختصر.

div {
    background: url(pyramids.png) right center no-repeat, url(paper.png) repeat left bottom;
    background-size: 70px 70px, contain;
}