19. صور الخلفية والتكرار
يسمح لك CSS بتعيين صورة كخلفية لأي عنصر باستخدام خاصية background-image.
تعيين صورة خلفية
استخدم دالة url() للإشارة إلى ملف الصورة. المسارات تكون نسبية لموقع ملف CSS.
css .hero-section { /* يفترض المسار أن الصورة موجودة في مجلد 'images' بالنسبة لملف CSS / background-image: url('../images/forest.jpg'); min-height: 400px; / هام: صور الخلفية تحتاج إلى أبعاد ليتم رؤيتها */ color: white; }
تكرار الخلفية (background-repeat)
بشكل افتراضي، إذا كانت الصورة أصغر من العنصر، سيقوم المتصفح بتكرار الصورة لملء المساحة. عادة ما تحتاج إلى التحكم في هذا السلوك.
| القيمة | الوصف |
|---|---|
repeat (افتراضي) | يتكرر أفقياً وعمودياً. |
repeat-x | يتكرر أفقياً فقط. |
repeat-y | يتكرر عمودياً فقط. |
no-repeat | تظهر الصورة مرة واحدة فقط. |
css .texture { background-image: url('tile.png'); background-repeat: repeat-x; }
موضع الخلفية (background-position)
إذا استخدمت no-repeat ، فغالباً ما ترغب في تحديد موضع الصورة. تأخذ هذه الخاصية قيمتين: أفقي (left/center/right أو قيمة) وعمودي (top/center/bottom أو قيمة).
css .centered-logo { background-image: url('logo.svg'); background-repeat: no-repeat; background-position: center center; /* يوسط الصورة أفقياً وعمودياً */ }