وثائق CSS قابلة للتشغيل: صورة الخلفية

Q: كيف أضيف صورة خلفية في CSS؟

استخدم background-image: url("photo.jpg"); على العنصر. المسار نسبي إلى ملف CSS (أو إلى الصفحة، في حالة السمة style أو العنصر ). أعطِ العنصر حجمًا، لأن الخلفية لا تجعل عنصرًا فارغًا يكبر أبدًا.

Q: كيف أجعل صورة الخلفية تغطي العنصر كله؟

استخدم background-size: cover; مع background-position: center;. تتغير الصورة لتملأ الصندوق بالكامل مع الحفاظ على نسبها، ويُقص الجزء الزائد.

Q: ما الفرق بين cover وcontain؟

تملأ cover الصندوق كله وتقص ما لا يتسع. أما contain فتعرض الصورة كاملة وتترك مساحة فارغة على جانبين حين تختلف النسب.

Q: كيف أمنع تكرار صورة الخلفية؟

أضف background-repeat: no-repeat;. افتراضيًا تتكرر صورة الخلفية في الاتجاهين لتملأ العنصر.

Q: لماذا لا تظهر صورة الخلفية عندي؟

الأسباب المعتادة: مسار خاطئ في url() (فهو نسبي إلى ملف CSS)، أو عنصر بلا ارتفاع لأنه بلا محتوى، أو اختصار background لاحق أعاد ضبط الصورة.

كيف تضيف صورة خلفية

تطلي background-image صورة خلف محتوى العنصر وحشوه وحده. افتراضيًا تبدأ من الزاوية العلوية اليسرى لصندوق الحشو، وتحتفظ بحجمها الطبيعي، وتتكرر لتملأ الصندوق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

في مشروع حقيقي يشير url() إلى ملف: url("images/hero.jpg"). المسار نسبي إلى ملف الأنماط الذي يحتويه (أو إلى الصفحة، في حالة العنصر <style>). تستخدم الأمثلة في هذه الصفحة صور SVG صغيرة مكتوبة مباشرة كعناوين data: كي تعمل في أي مكان.

أمران يجب معرفتهما من البداية:

الخلفية لا تعطي العنصر حجمًا. عنصر div فارغ بصورة خلفية ارتفاعه 0px. أعطه محتوى أو حشوًا أو height أو aspect-ratio.
صورة الخلفية زخرفة. تتخطاها قارئات الشاشة وليس لها نص بديل. الصورة التي تحمل معنى مكانها عنصر <img>.

background-size: cover وcontain والأطوال

تغيّر background-size حجم الصورة. الكلمتان المفتاحيتان تحافظان على نسبها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

عرض الصورة ضعف ارتفاعها، وكل صندوق مربع.

القيمة	النتيجة
`auto` (الافتراضي)	حجم الصورة الأصلي
`cover`	تكبر حتى يمتلئ الصندوق بالكامل؛ ويُقص الزائد
`contain`	تكبر حتى تتسع الصورة كلها؛ وتبقى شرائط رمادية على جانبين
`200px`	بعرض 200px، والارتفاع بالتناسب
`50% auto`	نصف عرض الصندوق، والارتفاع بالتناسب
`100% 100%`	بحجم الصندوق تمامًا؛ تتشوه الصورة إن اختلفت النسب

cover هي الخيار المعتاد للبانرات الرئيسية والبطاقات. وcontain للشعارات والرسوم التي يجب ألا تُقص أبدًا.

background-position وbackground-repeat

تضع background-position الصورة داخل الصندوق، بكلمات مفتاحية (top، center، bottom، left، right) أو نسب مئوية أو أطوال. وتتحكم background-repeat في التكرار. جرّب بعض القيم:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب المواضع top right وbottom 10px right 20px و25% 75%، وقيم التكرار repeat-x وrepeat-y وspace (تكرار مع فجوات كي لا تُقص أي نسخة) وround (تكرار مع تغيير الحجم كي يتسع عدد صحيح من النسخ).

الطبقات: عدة خلفيات ونص فوق الصورة

تقبل background-image قائمة مفصولة بفواصل. الطبقة الأولى تُرسم في الأعلى. الاستخدام الشائع هو تدرج شبه شفاف فوق صورة، كي يبقى النص الأبيض مقروءًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

تعطي aspect-ratio الصندوق الفارغ ارتفاعًا، وbackground-size: cover تنطبق على الطبقتين. لمزيد من وصفات التدرج راجع التدرج اللوني في CSS.

الاختصار background

تضبط background كل خصائص الخلفية في سطر واحد. يجب أن يأتي الحجم مباشرة بعد الموضع، تفصل بينهما شرطة مائلة، ويوضع اللون في الطبقة الأخيرة:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

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

خصائص خلفية أخرى

الخاصية	ماذا تفعل
`background-attachment: fixed`	تبقى الصورة ثابتة أثناء تمرير الصفحة (تُتجاهل في Safari على iOS)
`background-origin`	هل يبدأ الموضع من حافة الحد أم الحشو أم المحتوى
`background-clip`	أين تُطلى الخلفية، بما في ذلك `text` لملء الحروف
`background-blend-mode`	تمزج الطبقات معًا، مثل `multiply`

أخطاء شائعة

مسار خاطئ. url() في ملف الأنماط نسبي إلى ملف CSS، لا إلى صفحة HTML.
عنصر فارغ. لا ارتفاع له، فلا مكان تظهر فيه الصورة.
نسيان no-repeat مع contain أو مع صورة صغيرة: فتتكرر.
المط بـ 100% 100% حين كنت تقصد cover.
صور مهمة كخلفيات. استخدم <img> مع نص بديل للمحتوى؛ فالخلفيات غير مرئية لقارئات الشاشة.
غياب علامات التنصيص حول عنوان data: يحتوي على مسافات أو علامات تنصيص. اكتب دائمًا url("...").

الأسئلة الشائعة

كيف أضيف صورة خلفية في CSS؟

استخدم background-image: url("photo.jpg"); على العنصر. المسار نسبي إلى ملف CSS (أو إلى الصفحة، في حالة السمة style أو العنصر <style>). أعطِ العنصر حجمًا، لأن الخلفية لا تجعل عنصرًا فارغًا يكبر أبدًا.

كيف أجعل صورة الخلفية تغطي العنصر كله؟

استخدم background-size: cover; مع background-position: center;. تتغير الصورة لتملأ الصندوق بالكامل مع الحفاظ على نسبها، ويُقص الجزء الزائد.

ما الفرق بين cover وcontain؟

تملأ cover الصندوق كله وتقص ما لا يتسع. أما contain فتعرض الصورة كاملة وتترك مساحة فارغة على جانبين حين تختلف النسب.

كيف أمنع تكرار صورة الخلفية؟

أضف background-repeat: no-repeat;. افتراضيًا تتكرر صورة الخلفية في الاتجاهين لتملأ العنصر.

لماذا لا تظهر صورة الخلفية عندي؟

الأسباب المعتادة: مسار خاطئ في url() (فهو نسبي إلى ملف CSS)، أو عنصر بلا ارتفاع لأنه بلا محتوى، أو اختصار background لاحق أعاد ضبط الصورة.

مفاهيم ذات صلة