در طراحی وب، یکی از ویژگی‌های مهم CSS که برای کنترل تصاویر پس‌زمینه استفاده می‌شود، background-size است. مقدار cover برای این ویژگی، به شما کمک می‌کند تا تصویر پس‌زمینه به شکلی نمایش داده شود که تمام فضای عنصر را پوشش دهد، بدون اینکه نسبت ابعاد اصلی تصویر تغییر کند.
وقتی از background-size: cover استفاده می‌کنید، تصویر به اندازه‌ای بزرگ یا کوچک می‌شود که تمام فضای عنصر را پر کند. اگر نسبت ابعاد تصویر با عنصر متفاوت باشد، بخش‌هایی از تصویر ممکن است بریده شوند تا این اتفاق بیفتد. این ویژگی به‌ویژه برای طراحی‌های ریسپانسیو بسیار مفید است.
کاربردهای عملی
از background-size: cover در موارد زیر استفاده می‌شود:
- ایجاد تصاویر پس‌زمینه تمام‌صفحه که در هر دستگاه به‌خوبی نمایش داده می‌شوند.
- استفاده در بنرها یا هدرهای وبسایت که باید در تمام اندازه‌های صفحه قابل‌مشاهده باشند.
- طراحی کارت‌های محصول یا بخش‌های ویژه که نیاز به تصاویر پس‌زمینه جذاب دارند.
نمونه کدهای مرتبط
در این بخش، چند مثال از نحوه استفاده از background-size: cover را مشاهده می‌کنید:
مثال ۱: تصویر پس‌زمینه تمام صفحه
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
margin: 0;
}مثال ۲: بنر با تصویر پس‌زمینه
.banner {
width: 100%;
height: 300px;
background-image: url('banner.jpg');
background-size: cover;
background-position: center;
}مثال ۳: کارت محصول با تصویر پس زمینه
.product-card {
width: 200px;
height: 300px;
background-image: url('product.jpg');
background-size: cover;
border-radius: 8px;
}خلاصه درس
- background-size: cover تضمین می‌کند که تصویر تمام فضای عنصر را پر می‌کند، حتی اگر بخشی از تصویر بریده شود.
- برای جلوگیری از بریده شدن بخش‌های مهم تصویر، از background-position استفاده کنید.
- این ویژگی برای تصاویر با کیفیت بالا مناسب است، زیرا در اندازه‌های بزرگ ممکن است کیفیت تصویر کاهش یابد.
- در طراحی ریسپانسیو، ترکیب cover با واحدهای نسبی مانند vw و vh نتیجه بهتری دارد.
با استفاده صحیح از background-size: cover، می‌توانید تصاویر پس‌زمینه‌ای ایجاد کنید که در هر دستگاه و هر اندازه‌ای از صفحه، به‌صورت حرفه‌ای نمایش داده شوند.
