تنظیم موقعیت تصویر پس‌زمینه در طراحی وب کاربردهای فراوانی دارد. برای مثال، ممکن است بخواهید لوگوی شرکت را در مرکز صفحه قرار دهید یا یک تصویر decorative را در گوشه‌ای خاص از صفحه نمایش دهید. همچنین، این تکنیک در طراحی ریسپانسیو بسیار مفید است، زیرا می‌توانید موقعیت تصویر را بر اساس اندازه صفحه تغییر دهید.
در مواردی که تصویر پس‌زمینه کوچکتر از عنصر است، تنظیم موقعیت به شما کمک می‌کند تا بخش خاصی از تصویر را نمایش دهید. این موضوع به ویژه زمانی اهمیت پیدا می‌کند که از تصاویر sprite استفاده می‌کنید و می‌خواهید فقط بخشی از آن را نمایش دهید.
نمونه کدهای مرتبط
در ادامه چند مثال عملی از تنظیم موقعیت تصویر پس‌زمینه را مشاهده می‌کنید:
مثال ۱: تنظیم موقعیت با کلمات کلیدی
.element {
background-image: url('image.jpg');
background-position: center top;
background-repeat: no-repeat;
}مثال ۲: تنظیم موقعیت با مقادیر عددی
.element {
background-image: url('image.jpg');
background-position: 20px 50%;
background-size: cover;
}مثال ۳: استفاده از موقعیت نسبی و ثابت
.element {
background-image: url('image.jpg');
background-position: right bottom;
background-attachment: fixed;
}خلاصه درس
- مقادیر background-position به ترتیب موقعیت افقی و عمودی را مشخص می‌کنند.
- می‌توانید از یک یا دو مقدار برای این ویژگی استفاده کنید. اگر فقط یک مقدار مشخص شود، مقدار دوم به صورت پیش‌فرض center در نظر گرفته می‌شود.
- ترکیب background-position با background-size نتایج جالب‌تری ایجاد می‌کند.
- برای تصاویر بزرگ، بهتر است از background-size: cover یا contain استفاده کنید.
- مقدار background-attachment: fixed باعث می‌شود تصویر پس‌زمینه هنگام اسکرول ثابت بماند.
با تمرین و آزمایش این ویژگی‌ها می‌توانید به نتایج خلاقانه‌ای در طراحی صفحات وب دست پیدا کنید. یادگیری تنظیم دقیق موقعیت تصاویر پس‌زمینه یکی از مهارت‌های ضروری برای هر طراح وب است که به شما کمک می‌کند طرح‌های حرفه‌ای‌تری ایجاد کنید.
