کنترل کامل پس‌زمینه عناصر با ویژگی‌های CSS

ویژگی‌های پس‌زمینه

۱. background-color

رنگ پس‌زمینه (همه روش‌های رنگ قبلی).

div {
  background-color: #ff0;     /* زرد */
  background-color: rgb(255,0,255); /* بنفش */
}

۲. background-image

تصویر پس‌زمینه با URL.

div {
  background-image: url(images/bg.gif);
  background-image: url("https://example.com/bg.jpg");
}

نکته: " و ' اختیاری.

۳. background-repeat

تکرار تصویر:

• repeat (پیش‌فرض): افقی+عمودی
• repeat-x: فقط افقی
• repeat-y: فقط عمودی
• no-repeat: بدون تکرار

div {
  background-image: url(images/bg.gif);
  background-repeat: no-repeat;
}

۴. background-position

موقعیت تصویر:

div {
  background-image: url(images/logo.png);
  background-repeat: no-repeat;
  background-position: right top;  /* گوشه راست بالا */
  background-position: center center;
  background-position: 50% 50%;   /* مرکز */
}

مقادیر: top, center, bottom, left, right, px, %.

۵. background-attachment

ثابت ماندن تصویر هنگام اسکرول:

• scroll (پیش‌فرض): با محتوا اسکرول
• fixed: نسبت به viewport ثابت

body {
  background-image: url(images/bg.jpg);
  background-attachment: fixed;
}

ویژگی ترکیبی background (CSS3)

همه ویژگی‌ها را یکجا:

div {
  background: #ff0 url(images/bg.gif) no-repeat right top fixed;
}

ترتیب: color image repeat attachment position

اگر هنگام استفاده از ویژگیbackground یک مقدار فراموش شود و یا مشخص نشده باشد، از مقدار پیش فرض آن ویژگی، در صورت وجود، استفاده می شود.

توجه: ویژگی های پس زمینه ارثی نیست، اما به طور پیش فرض، مقدار اولیه برای ویژگی پس زمینه در CSS، transparent تنظیم شده است، به همین دلیل پس زمینه عنصر والد نمایش داده می شود.

ویژگی background-size (CSS3)

اندازه تصویر:

div {
  background-image: url(images/photo.jpg);
  background-size: 100px 200px;  /* عرض ارتفاع */
  background-size: cover;        /* کل مساحت (برش) */
  background-size: contain;      /* کامل نمایش (فاصله) */
}

مثال کامل

.hero {
  background: #369 url('hero-bg.jpg') no-repeat center/cover fixed;
  height: 500px;
  color: white;
}

برچسب‌ها: CSS, پس‌زمینه, Background, تصویر.