تنظیم repeat/position/size در CSS
یکی از قابلیت‌های قدرتمند CSS، کنترل تصاویر پس‌زمینه با استفاده از ویژگی‌های background-repeat، background-position و background-size است. این ویژگی‌ها به شما امکان می‌دهند ظاهر و رفتار تصاویر را به طور دقیق تنظیم کنید.
ویژگی background-repeat
این ویژگی تعیین می‌کند که تصویر پس‌زمینه چگونه تکرار شود. مقادیر اصلی آن عبارتند از:
- repeat: تکرار تصویر در هر دو جهت (پیش‌فرض)
- repeat-x: تکرار فقط در جهت افقی
- repeat-y: تکرار فقط در جهت عمودی
- no-repeat: عدم تکرار تصویر
| مقدار |
توضیح |
| space |
تکرار با فاصله‌گذاری یکنواخت |
| round |
تکرار با تغییر اندازه تصویر برای پر کردن فض |
ویژگی background-position
این ویژگی موقعیت تصویر پس‌زمینه را مشخص می‌کند. می‌توانید از مقادیر زیر استفاده کنید:
- مقادیر کلمه‌ای: top, bottom, left, right, center
- مقادیر درصدی: مانند 50% 25%
- مقادیر پیکسلی: مانند 20px 40px
مثال: background-position: right top; تصویر را در گوشه بالا-راست قرار می‌دهد.
ویژگی background-size
این ویژگی اندازه تصویر پس‌زمینه را کنترل می‌کند. مهم‌ترین مقادیر آن:
| مقدار |
نتیجه |
| auto |
اندازه اصلی تصویر (پیش‌فرض) |
| cover |
پوشش کامل عنصر (ممکن است بخشی از تصویر بریده شود) |
| contain |
نمایش کامل تصویر بدون برش |
برای یادگیری عمیق‌تر درباره این ویژگی‌ها، می‌توانید به آموزش وارد شوید مراجعه کنید.
نکته مهم: ترکیب این سه ویژگی به شما امکان می‌دهد طرح‌های پیچیده‌ای ایجاد کنید. به عنوان مثال:
background-image: url(pattern.png);
background-repeat: repeat-x;
background-position: center bottom;
background-size: 200px auto;
