پس‌زمینه‌ها (Backgrounds) - بوم نقاشی شما 🎨

پس‌زمینه می‌تونه رنگ ساده، عکس، گرادینت یا حتی ترکیبی از همه اینا باشه!

۱. رنگ پس‌زمینه (Background Color)

ساده‌ترین حالت:

body {{
  background-color: #f0f0f0;
}}

.box {{
  background-color: rgba(255, 0, 0, 0.3); /* قرمز شفاف */
}}

.product-card {{
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}}

.product-card:hover {{
  background-color: rgba(15, 23, 42, 0.6); /* تغییر رنگ موقع hover */
}}

۲. تصویر پس‌زمینه (Background Image)

برای اضافه کردن عکس:

.hero {{
  background-image: url('hero-bg.jpg');
  height: 400px;
}}

تکرار تصویر (Background Repeat)

به طور پیش‌فرض، عکس تکرار میشه (کاشی‌کاری). می‌تونید کنترلش کنید:

background-repeat: repeat;      /* تکرار (پیش‌فرض) */
background-repeat: no-repeat;   /* فقط یک‌بار */
background-repeat: repeat-x;    /* فقط افقی */
background-repeat: repeat-y;    /* فقط عمودی */

موقعیت تصویر (Background Position)

background-position: center;           /* وسط */
background-position: top right;        /* بالا-راست */
background-position: 50px 100px;       /* ۵۰px از چپ، ۱۰۰px از بالا */
background-position: center center;    /* کاملاً وسط */

اندازه تصویر (Background Size)

این خیلی مهمه برای responsive بودن:

background-size: cover;    /* عکس رو بزرگ/کوچیک کن که کل فضا رو پر کنه */
background-size: contain;  /* عکس رو کامل نشون بده (فضا خالی ممکنه) */
background-size: 100% 100%; /* کش بده (نسبت اولیه حفظ نمیشه) */
background-size: 50%;      /* نصف سایز اصلی */

.fullscreen-bg {{
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* وقتی اسکرول میکنی عکس ثابت میمونه */
}}

۳. Shorthand Property - همه در یک خط!

/* به جای اینکه بنویسی: */
background-color: #f8fafc;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

/* خلاصه بنویس: */
background: #333 url('bg.jpg') no-repeat center/cover;
/*          رنگ  عکس          تکرار    موقعیت/سایز  */

۴. چند پس‌زمینه روی هم!

می‌تونید چندتا background روی هم بذارید (اولی رو میاد):

background-image: 
  url('pattern.png'),
  url('gradient-overlay.png'),
  url('main-bg.jpg');
  
background-position: 
  0 0,
  center,
  top;

.hero {{
  height: 500px;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}}

  
به سایت ما خوش اومدید