در CSS، ویژگی background یک shorthand property است که به شما امکان می‌دهد چندین ویژگی مرتبط با پس‌زمینه را در یک خط تعریف کنید. این ویژگی می‌تواند شامل رنگ پس‌زمینه، تصویر، موقعیت، اندازه، تکرار و دیگر موارد باشد. اما برای استفاده صحیح از آن، باید ترتیب مقادیر را به درستی رعایت کنید.
ترتیب استاندارد مقادیر در background
ترتیب توصیه شده برای مقادیر در background به شرح زیر است:
- background-color: رنگ پس‌زمینه
- background-image: تصویر پس‌زمینه
- background-position: موقعیت تصویر
- background-size: اندازه تصویر
- background-repeat: نحوه تکرار تصویر
- background-origin: مبدأ تصویر
- background-clip: محدوده نمایش تصویر
- background-attachment: ثابت یا متحرک بودن تصویر
البته لازم نیست همه این مقادیر را مشخص کنید. می‌توانید فقط مقادیر مورد نیاز خود را وارد کنید و بقیه به صورت پیش‌فرض در نظر گرفته می‌شوند.
کاربردهای عملی
استفاده از background shorthand می‌تواند کدهای CSS شما را کوتاه‌تر و خوانایی آن را افزایش دهد. در زیر چند مثال عملی آورده شده است:
نمونه کدهای مرتبط
مثال ۱: تعریف رنگ و تصویر پس‌زمینه
div {
background: #f0f0f0 url('image.jpg') no-repeat center;
}مثال ۲: تعریف تصویر با موقعیت و اندازه مشخص
div {
background: url('image.jpg') center/cover no-repeat;
}مثال ۳: تعریف چندین ویژگی به صورت کامل
div {
background: #f0f0f0 url('image.jpg') top right/50% no-repeat padding-box content-box fixed;
}خلاصه درس
- ترتیب مقادیر در background مهم است، اما اگر برخی از مقادیر را حذف کنید، مرورگر مقادیر پیش‌فرض را اعمال می‌کند.
- مقادیر background-size باید بلافاصله بعد از background-position و با یک اسلش (`/`) از آن جدا شود.
- اگر از background-origin و background-clip استفاده می‌کنید، ترتیب آن‌ها مهم است. ابتدا `origin` و سپس clip قرار می‌گیرد.
- برای جلوگیری از خطا، بهتر است مقادیر را به ترتیب استاندارد وارد کنید.
با رعایت این نکات، می‌توانید از shorthand property background به صورت مؤثر و بدون خطا استفاده کنید.
