خلفية CSS

<style>
.box {
  background-color: #f5f5f5;
}
.highlight {
  background-color: rgba(255, 255, 0, 0.3);
}
</style>
<div class="box">عنصر صندوق يُظهر لون الخلفية</div>
<div class="highlight">هذا النص له خلفية مميزة</div>

<style>
.banner {
  background-image: url("/assets/images/tutorials/css-banner.jpg");
  height: 200px;
  background-size: cover;
  background-position: center;
}
</style>
<div class="banner">منطقة عرض محتوى البانر</div>

<style>
.multi-bg {
  background-image: url("/assets/images/tutorials/css-star.png"), url("/assets/images/tutorials/css-bg.jpg");
  height: 200px;
  background-size: 50px, cover;
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
}
</style>
<div class="multi-bg">تأثير تراكب خلفيات متعددة</div>

<style>
.no-repeat {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: no-repeat;
  background-color: #f0f0f0;
  height: 100px;
}
.repeat-x {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: repeat-x;
  background-color: #e3f2fd;
  height: 100px;
}
</style>
<div class="no-repeat">بدون تكرار (صورة واحدة)</div>
<div class="repeat-x">تكرار أفقي</div>

<style>
.cover {
  background-image: url("/assets/images/tutorials/css-banner.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
}
.contain {
  background-image: url("/assets/images/tutorials/css-banner.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  height: 200px;
}
</style>
<div class="cover">غطاء: يملأ الحاوية، قد يقص الزائد</div>
<div class="contain">احتواء: يُظهر الصورة كاملة، قد يترك فراغاً</div>

<style>
.center {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f5f5f5;
  height: 100px;
}
.top-right {
  background-image: url("/assets/images/tutorials/css-star.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-color: #e3f2fd;
  height: 100px;
}
</style>
<div class="center">خلفية مُوَسَّطة</div>
<div class="top-right">خلفية في الزاوية العلوية اليمنى</div>

<style>
.shorthand {
  background: #333 url("/assets/images/tutorials/css-banner.jpg") no-repeat center/cover;
  height: 200px;
  color: white;
}
</style>
<div class="shorthand">اختصار خلفية بلون وتكرار وموضع وحجم</div>