کنترل کامل تصویر پس‌زمینه: کاور، تکرار یا فیت؟

Background Size: اندازه عکس پس‌زمینه، با کلی امکانات! 📏

سلام دوباره به همراهان عزیز! تا اینجا با رنگ، عکس، تکرار و جایگاه پس‌زمینه آشنا شدیم. اما گاهی اوقات اندازه‌ی خود عکس پس‌زمینه نیاز به تنظیم داره. اینجا است که خصوصیت `background-size` وارد میدون می‌شه و بهمون قدرت زیادی برای کنترل ظاهر عکس می‌ده. آماده‌اید که با این غول دوست‌داشتنی آشنا بشیم؟ 😉

1. `background-size`: تعیین اندازه تصویر 🖼️

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

• مقادیر طول و عرض (مثل پیکسل یا درصد):

  می‌تونین دو مقدار بدین: اولی برای عرض، دومی برای ارتفاع. اگه فقط یه مقدار بدین، دومی به طور خودکار همون مقدار اول در نظر گرفته می‌شه (یعنی تصویر مربع می‌شه).

  
  .custom-size {
    background-image: url('my-image.jpg');
    background-repeat: no-repeat; /* برای اینکه بهتر ببینیم */
  
    background-size: 150px 100px; /* عرض 150 پیکسل، ارتفاع 100 پیکسل */
  }
  
  .square-size {
    background-size: 80px; /* عرض 80px، ارتفاع 80px */
  }
  
  .percentage-size {
    background-size: 50% 50%; /* تصویر 50% عرض و 50% ارتفاع والد رو بگیره */
  }
          

• کلمات کلیدی خاص:

  دو کلمه کلیدی خیلی پرکاربرد وجود داره که کار رو راحت می‌کنه:

  • `cover`: تصویر رو طوری بزرگ می‌کنه که کل ناحیه پس‌زمینه رو بپوشونه، حتی اگه مجبور بشه بخشی از تصویر بریده بشه. نسبت ابعاد تصویر حفظ می‌شه.
  • `contain`: تصویر رو طوری کوچیک یا بزرگ می‌کنه که کل اون در ناحیه پس‌زمینه جا بشه، بدون اینکه بریده بشه. نسبت ابعاد تصویر حفظ می‌شه. اگه نسبت ابعاد تصویر با عنصر یکی نباشه، ممکنه فضاهای خالی ایجاد بشه.

  
  .cover-background {
    background-image: url('big-image.jpg');
    background-size: cover; /* کل صفحه رو می‌پوشونه */
    height: 100vh; /* مثال: ارتفاع کل صفحه */
  }
  
  .contain-background {
    background-image: url('icon.png');
    background-size: contain; /* آیکون داخل کادر جا می‌شه */
    border: 1px solid gray; /* برای دیدن کادر */
    width: 200px;
    height: 150px;
  }
          

`cover` برای پر کردن کامل پس‌زمینه (مثل عکس پس‌زمینه صفحه) عالیه، در حالی که `contain` وقتی می‌خواین مطمئن بشین تمام تصویر دیده می‌شه (مثل یه لوگو) کاربرد داره.

2. مختصرنویسی `background`: جمع‌بندی نهایی! 🎀

همونطور که قبلاً اشاره کردیم، خصوصیت `background` یه راه خیلی سریع و کارآمد برای تعریف همه‌ی ویژگی‌های پس‌زمینه در یک خطه. حالا که با `background-size` آشنا شدیم، می‌تونیم مثال‌های کامل‌تری ببینیم.

نکته مهم در ترتیب: وقتی از `background-size` استفاده می‌کنین، باید بعد از `background-position` و با یه علامت اسلش (/) ازش جدا بشه.

قالب کلی: background: [color] [image] [repeat] [attachment] [position] / [size];

مثال‌های کامل با `background` و `background-size`:

.example1 {
  /* رنگ، تصویر، تکرار، موقعیت، اندازه */
  background: lightblue url('pattern.png') repeat-x center center / 50% 50%;
}

.example2 {
  /* رنگ، تصویر، عدم تکرار، موقعیت، اندازه cover */
  background: #f0f0f0 url('hero-image.jpg') no-repeat center center / cover;
  height: 100vh; /* فرض کنیم این تصویر پس‌زمینه صفحه است */
}

.example3 {
  /* رنگ، تصویر، تکرار، موقعیت، اندازه contain */
  background: white url('logo.svg') no-repeat top left / contain;
  border: 1px solid #ccc; /* برای دیدن مرز */
  width: 300px;
  height: 200px;
}

.example4 {
  /* فقط رنگ و اندازه */
  background: yellow;
  background-size: 100px auto; /* عرض 100، ارتفاع خودکار */
}

استفاده درست از مختصرنویسی `background` کد شما رو بسیار تمیز و خوانا می‌کنه. همیشه سعی کنین اول خصوصیت‌های جداگانه رو یاد بگیرین و بعد سراغ مختصرنویسی برین تا درک بهتری از روند کار داشته باشین.

با `background-size` و مهارت در استفاده از مختصرنویسی `background`، شما می‌تونین پس‌زمینه‌های خیره‌کننده‌ای بسازین که به وب‌سایتتون شخصیت و جذابیت خاصی می‌بخشه. خلاقیت به خرج بدین و از نتیجه لذت ببرین! 💖