شاهکار پس‌زمینه: هر کاری که با Background می‌شود کرد

جادوی پس‌زمینه: رنگ، عکس، تکرار و جایگاه! ✨

سلام به دوستای خوش‌سلیقه! تا اینجا کلی در مورد ظاهر متن و جعبه‌ها صحبت کردیم. حالا وقتشه که به عنصر محبوب همه‌مون، یعنی پس‌زمینه (Background) بپردازیم! با ویژگی‌های پس‌زمینه می‌تونین جذابیت بصری فوق‌العاده‌ای به عناصرتون بدین. امروز می‌خوایم چند تا از مهم‌ترین خصوصیت‌های پس‌زمینه رو بررسی کنیم: background-color، background-image، background-repeat و background-position. آماده‌اید؟ بزن بریم! 🚀

1. `background-color`: رنگ پس‌زمینه، ساده و دلنشین! 🎨

این ساده‌ترین راه برای رنگ دادن به پس‌زمینه یه عنصره. می‌تونین از اسم رنگ‌ها، کدهای هگزادسیمال، RGB یا HSL استفاده کنین.

.element-with-color {
  background-color: #f0f8ff; /* رنگ آلیس بلو */
}

.another-element {
  background-color: rgb(144, 238, 144); /* رنگ سبز روشن */
}

.cool-element {
  background-color: hsl(240, 100%, 70%); /* رنگ آبی روشن */
}

اگه رنگ پس‌زمینه رو تنظیم نکنین، پیش‌فرضش شفاف (transparent) هست و رنگ پس‌زمینه والد رو نشون می‌ده.

2. `background-image`: یه عکس دلخواه! 🖼️

برای اضافه کردن یه تصویر به پس‌زمینه، از این خصوصیت استفاده می‌کنیم. آدرس عکس رو داخل تابع `url()` قرار می‌دیم.

.element-with-image {
  background-image: url('path/to/your/image.jpg');
}

.gradient-background {
  /* می‌تونین از گرادینت‌ها هم استفاده کنین! */
  background-image: linear-gradient(to right, red, yellow);
}

اگه یه رنگ پس‌زمینه و یه تصویر پس‌زمینه همزمان تعریف کنین، رنگ به عنوان لایه زیرین تصویر قرار می‌گیره. اگه تصویر بارگذاری نشد، رنگ دیده می‌شه.

3. `background-repeat`: عکس رو چکار کنیم؟ 🔁

وقتی تصویر پس‌زمینه کوچیکتر از عنصرمون باشه، باید تصمیم بگیریم که چطور تکرار بشه. گزینه‌های اصلی این‌ها هستن:

• `repeat` (پیش‌فرض): تصویر هم به صورت افقی و هم عمودی تکرار می‌شه.
• `repeat-x`: تصویر فقط به صورت افقی تکرار می‌شه.
• `repeat-y`: تصویر فقط به صورت عمودی تکرار می‌شه.
• `no-repeat`: تصویر اصلاً تکرار نمی‌شه و فقط یک بار نمایش داده می‌شه.

مثال:

.no-repeat-background {
  background-image: url('icon.png');
  background-repeat: no-repeat; /* فقط یک آیکون نمایش داده می‌شه */
}

.horizontal-repeat {
  background-image: url('pattern.png');
  background-repeat: repeat-x; /* الگو فقط به صورت افقی تکرار می‌شه */
}

اگه فقط رنگ پس‌زمینه رو تعیین کرده باشین، این خصوصیت هیچ تاثیری نداره.

4. `background-position`: عکس رو کجای صفحه بذاریم؟ 📍

این خصوصیت مشخص می‌کنه که تصویر پس‌زمینه در کجا نسبت به عنصر قرار بگیره. می‌تونین از مقادیر زیر استفاده کنین:

• کلمات کلیدی: top, bottom, left, right, center.
• مقادیر عددی: مثل پیکسل (50px) یا درصد (25%).

می‌تونین دو مقدار بدین: اولی برای موقعیت افقی (x-axis) و دومی برای موقعیت عمودی (y-axis).

مثال:

.background-centered {
  background-image: url('logo.png');
  background-repeat: no-repeat; /* تکرار نمی‌کنیم */
  background-position: center; /* وسط چین می‌شه */
}

.background-top-right {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: top right; /* بالا سمت راست */
}

.background-custom-position {
  background-image: url('pattern.jpg');
  background-repeat: repeat-x;
  background-position: 100px 50px; /* 100px از چپ، 50px از بالا */
}

.background-percentage {
  background-image: url('photo.jpg');
  background-repeat: no-repeat;
  background-position: 25% 75%; /* 25% از چپ، 75% از بالا */
}

اگه فقط یه مقدار برای `background-position` بدین (مثلاً `center`)، مرورگر به طور خودکار مقدار دیگه رو هم `center` در نظر می‌گیره.

5. مختصرنویسی `background` 🌟

مثل خیلی از خصوصیت‌های دیگه، برای پس‌زمینه هم یه خصوصیت خلاصه‌شده داریم: `background`. با این خصوصیت می‌تونین همه موارد بالا رو (و حتی چند مورد دیگه مثل `background-attachment` و `background-size`) در یک خط تعریف کنین.

ترتیب معمول (اگه همه رو استفاده کنین):
background: [color] [image] [repeat] [attachment] [position] / [size];

مثال:

.fancy-background {
  /* color image repeat position */
  background: lightgreen url('pattern.png') no-repeat center center;
}

.another-fancy-one {
  /* color image position */
  background: #eee url('photo.jpg') no-repeat top left;
}

.super-fancy {
  /* color image repeat position / size */
  background: #ddd url('texture.jpg') repeat center center / 50%;
}

وقتی از مختصرنویسی `background` استفاده می‌کنین، مقادیری که تعریف نمی‌کنین به حالت پیش‌فرضشون برمی‌گردن. پس حواستون باشه که اگه می‌خواین خصوصیت خاصی حفظ بشه، یا جداگونه تعریفش کنین یا مطمئن بشین تو مختصرنویسی اومده.

پس‌زمینه یکی از خلاقانه‌ترین قسمت‌های طراحیه. با ترکیب این خصوصیت‌ها، می‌تونین طرح‌های بصری فوق‌العاده‌ای خلق کنین. شروع کنین به تست کردن و ببینین چه چیزهای قشنگی می‌تونین بسازین! 😍