ویژگی Background در CSS برای تعیین رنگ، تصویر و نحوه نمایش پس زمینه عناصر به کار می رود. با شناخت اجزای این ویژگی می توانید ظاهر بخش های مختلف صفحه را کنترل کنید و بدون افزودن عناصر اضافی، به طراحی سایت جلوه ای منسجم و خوانا بدهید.
در این راهنما، کاربرد ویژگی های اصلی پس زمینه را همراه با مثال های CSS بررسی می کنیم. اگر به مبانی این زبان نیاز دارید، می توانید آموزش CSS را مطالعه کنید. همچنین توضیحات تکمیلی درباره Background در دسترس است.
ویژگی Background در CSS چیست؟
پس زمینه می تواند یک رنگ ساده، تصویر، گرادیان یا ترکیبی از چند لایه تصویری باشد. CSS این امکان را فراهم می کند که ظاهر پس زمینه هر عنصر، از بدنه صفحه تا یک دکمه یا کارت، جداگانه تنظیم شود. استفاده درست از پس زمینه علاوه بر زیبایی، به تفکیک بخش ها و بهتر دیده شدن محتوای صفحه کمک می کند.
ویژگی های پس زمینه را می توان به صورت جداگانه نوشت یا با ویژگی کوتاه نویسی background در یک اعلان ترکیب کرد. پنج ویژگی پرکاربرد عبارت اند از:
این ویژگی ها در کنار گزینه هایی مانند background-size و background-clip کنترل بیشتری روی پس زمینه فراهم می کنند. انتخاب مناسب آن ها به نوع محتوا، اندازه نمایشگر و هدف طراحی بستگی دارد.
رنگ پس زمینه با background-color
ویژگی background-color رنگ پس زمینه یک عنصر را مشخص می کند. می توانید رنگ را با نام هایی مانند white، کد هگزادسیمال، مقادیر RGB یا قالب HSL بنویسید. برای مثال، کد زیر رنگ زمینه بدنه صفحه را آبی روشن می کند:
body {
background-color: #b0c4de;
}
اگر برای یک عنصر تصویر پس زمینه تعریف نشده باشد، رنگ تعیین شده در پشت محتوای آن دیده می شود. این رنگ همچنین می تواند هنگام بارگذاری نشدن تصویر، نقش زمینه جایگزین را ایفا کند. به همین دلیل بهتر است برای بخش هایی که تصویر دارند نیز رنگی متناسب با تصویر انتخاب کنید.
نکته های انتخاب رنگ
- رنگ متن و پس زمینه باید کنتراست کافی داشته باشند تا خواندن محتوا آسان باشد.
- برای متن های طولانی، از رنگ های خیلی تند یا ترکیب هایی که چشم را خسته می کنند پرهیز کنید.
- در طراحی واکنش گرا، رنگ زمینه را طوری انتخاب کنید که در اندازه های مختلف صفحه همچنان مناسب بماند.
- اگر تصویر پس زمینه ممکن است بارگذاری نشود، یک رنگ جایگزین هماهنگ در نظر بگیرید.
افزودن تصویر با background-image
برای قرار دادن تصویر در پس زمینه، از ویژگی background-image استفاده می شود. مسیر فایل تصویر در تابع url() قرار می گیرد. برای نمونه، کد زیر فایل paper.gif را به عنوان تصویر پس زمینه بدنه صفحه معرفی می کند:
body {
background-image: url("paper.gif");
}
مسیر تصویر می تواند نسبی یا کامل باشد. در مسیر نسبی، نشانی فایل نسبت به محل فایل CSS محاسبه می شود؛ بنابراین هنگام انتقال پروژه یا تغییر ساختار پوشه ها، مسیرها را بررسی کنید. نام فایل و پسوند آن نیز باید با فایل واقعی مطابقت داشته باشد.
تصویر پس زمینه برای تزئین بخش هایی مانند سربرگ، کارت یا ناحیه معرفی مناسب است؛ اما نباید اطلاعات ضروری فقط در تصویر ارائه شوند. متن مهم را به صورت متن واقعی صفحه قرار دهید تا کاربران و فناوری های کمکی بتوانند آن را بخوانند.
استفاده از گرادیان
مقدار background-image فقط به فایل تصویری محدود نیست و می تواند یک گرادیان CSS باشد. گرادیان برای ساخت زمینه های رنگی بدون درخواست فایل تصویر کاربرد دارد و می تواند به کاهش تعداد منابع خارجی صفحه کمک کند.
.banner {
background-image: linear-gradient(90deg, #16324f, #4b86b4);
}
اگر چند تصویر یا گرادیان را در یک عنصر به کار ببرید، هر لایه را با ویرگول از لایه بعدی جدا کنید. لایه ای که زودتر نوشته می شود معمولاً در جلوی لایه های بعدی قرار می گیرد. در این حالت، تنظیم اندازه و موقعیت هر لایه اهمیت زیادی دارد.
کنترل تکرار تصویر با background-repeat
به طور پیش فرض، مرورگر ممکن است تصویر پس زمینه را در دو جهت تکرار کند تا فضای عنصر را بپوشاند. ویژگی background-repeat این رفتار را تغییر می دهد. مقدار آن را متناسب با ابعاد تصویر و طرح مورد نظر انتخاب کنید.
| مقدار |
رفتار |
کاربرد معمول |
repeat |
تکرار تصویر در هر دو جهت |
بافت ها و الگوهای کوچک |
repeat-x |
تکرار افقی |
نوار یا گرادیان افقی |
repeat-y |
تکرار عمودی |
الگوی باریک عمودی |
no-repeat |
نمایش یک باره تصویر |
تصویر شاخص یا تزئینی |
space |
تکرار با فاصله گذاری میان تصاویر |
الگوهایی که نباید بریده شوند |
round |
تغییر اندازه تصویر برای جا شدن در فضا |
الگوهای تکرارشونده با لبه های هماهنگ |
برای تکرار افقی یک تصویر، می توانید از repeat-x استفاده کنید. این روش برای نوارهای تزئینی باریک مناسب است، اما استفاده از تصویرهای بزرگ و سنگین فقط برای پر کردن زمینه می تواند زمان بارگذاری صفحه را افزایش دهد.
body {
background-image: url("gradient2.png");
background-repeat: repeat-x;
}
اگر قصد دارید تصویر فقط یک بار نمایش داده شود، مقدار no-repeat را تنظیم کنید. به این ترتیب تصویر در سطح عنصر کاشی نمی شود و می توانید جایگاه آن را جداگانه مشخص کنید.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
رفتار تصویر هنگام پیمایش با background-attachment
ویژگی background-attachment مشخص می کند که تصویر پس زمینه هنگام پیمایش صفحه چگونه رفتار کند. مقدار پیش فرض آن معمولاً scroll است؛ یعنی تصویر همراه با محتوای صفحه جابه جا می شود.
scroll: پس زمینه همراه با صفحه پیمایش می شود.fixed: تصویر نسبت به محدوده دید مرورگر ثابت می ماند.local: تصویر همراه با محتوای قابل پیمایش همان عنصر حرکت می کند.
نمونه زیر تصویری بدون تکرار را به پس زمینه صفحه اضافه می کند و آن را در محدوده دید ثابت نگه می دارد:
body {
background-image: url("smiley.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
ثابت کردن تصویر ممکن است در بعضی دستگاه ها یا مرورگرهای موبایل رفتاری متفاوت داشته باشد و گاهی حرکت صفحه را سنگین تر کند. بهتر است این جلوه را روی تلفن همراه و رایانه آزمایش کنید و در صورت ایجاد مشکل، از مقدار scroll یا یک پس زمینه ساده تر استفاده کنید.
تنظیم جایگاه با background-position
ویژگی background-position محل قرارگیری تصویر پس زمینه را در عنصر مشخص می کند. می توانید جایگاه را با واژه هایی مانند top، right، center و bottom یا با مقادیر درصدی و طولی بنویسید.
برای قرار دادن تصویر در گوشه بالا و سمت راست، از نمونه زیر استفاده کنید:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: top right;
}
مقادیر درصدی به فضای موجود در عنصر وابسته هستند. برای مثال، 50% 50% معمولاً تصویر را در مرکز قرار می دهد. در چیدمان های راست به چپ، تفاوت میان جهت متن و جایگاه فیزیکی تصویر را در نظر بگیرید؛ واژه هایی مانند left و right به سمت های صفحه اشاره می کنند.
تغییر اندازه تصویر با background-size
ویژگی background-size اندازه تصویر پس زمینه را کنترل می کند. مقدار cover تصویر را بزرگ یا کوچک می کند تا کل محدوده عنصر پوشانده شود؛ در نتیجه ممکن است بخشی از تصویر از کادر بیرون بماند. مقدار contain تمام تصویر را در عنصر جا می دهد، اما ممکن است بخشی از زمینه خالی بماند.
.hero {
background-image: url("hero.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
برای تصویرهای پس زمینه بخش های اصلی سایت، معمولاً باید میان پوشش کامل کادر و دیده شدن تمام تصویر یکی را انتخاب کنید. در حالت cover، تصویر را در چند اندازه صفحه بررسی کنید تا قسمت مهم آن زیر برش قرار نگیرد. اگر سوژه تصویر باید به طور کامل دیده شود، contain یا اندازه های مشخص می توانند انتخاب مناسب تری باشند.
نوشتن ویژگی کوتاه نویسی background
برای خلاصه کردن چند تنظیم پس زمینه می توانید از ویژگی background استفاده کنید. در نمونه زیر، رنگ، تصویر، تکرار و جایگاه در یک اعلان نوشته شده اند:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
ترتیب مقدارها تا حدی انعطاف پذیر است، اما نوشتن منظم و خوانا، بررسی کد را آسان تر می کند. اگر از چند لایه پس زمینه استفاده می کنید یا به تنظیمات دقیق تری نیاز دارید، نوشتن ویژگی ها به صورت جداگانه ممکن است خطاهای احتمالی را کاهش دهد.
| ویژگی |
پرسشی که پاسخ می دهد |
نمونه مقدار |
background-color |
زمینه چه رنگی باشد؟ |
#ffffff |
background-image |
چه تصویر یا گرادیانی نمایش داده شود؟ |
url("image.jpg") |
background-repeat |
تصویر چگونه تکرار شود؟ |
no-repeat |
background-position |
تصویر کجا قرار بگیرد؟ |
center top |
background-size |
تصویر چه اندازه ای داشته باشد؟ |
cover |
background-attachment |
تصویر هنگام پیمایش چه رفتاری داشته باشد؟ |
scroll |
نکته های مهم برای استفاده بهینه از پس زمینه
۱. خوانایی محتوا را در اولویت قرار دهید
تصویر پس زمینه نباید باعث شود متن روی آن به سختی خوانده شود. اگر تصویر شلوغ است، می توانید روی آن یک لایه رنگی قرار دهید یا از گرادیان نیمه شفاف استفاده کنید. رنگ متن را نیز در حالت های مختلف نمایش صفحه بررسی کنید.
۲. حجم فایل تصویر را مدیریت کنید
فایل های تصویری بزرگ می توانند بارگذاری صفحه را کند کنند. پیش از استفاده، ابعاد و حجم تصویر را متناسب با نیاز کاهش دهید و قالب مناسبی انتخاب کنید. برای یک بافت ساده، استفاده از گرادیان CSS یا تصویر کوچک تکرارشونده گاهی از یک فایل بزرگ کارآمدتر است.
۳. نمایش در دستگاه های مختلف را آزمایش کنید
تصویری که در صفحه نمایش بزرگ مناسب است، ممکن است در موبایل بیش از حد بریده شود یا جایگاه نامناسبی پیدا کند. با استفاده از پرس وجوهای رسانه ای می توانید اندازه، جایگاه یا حتی تصویر پس زمینه را برای نمایشگرهای مختلف تغییر دهید.
@media (max-width: 600px) {
.hero {
background-position: center;
background-size: cover;
}
}
۴. مسیر فایل ها و دسترس پذیری را بررسی کنید
اگر تصویر نمایش داده نمی شود، مسیر فایل، حروف بزرگ و کوچک نام آن و پسوند را بررسی کنید. همچنین اطلاعاتی را که برای فهم صفحه ضروری هستند فقط در تصویر قرار ندهید. متن جایگزین برای تصاویر محتوایی در HTML تعریف می شود؛ تصویر پس زمینه CSS معمولاً باید جنبه تزئینی داشته باشد.
۵. از تنظیم های غیرضروری پرهیز کنید
افزودن چندین تصویر یا جلوه های سنگین همیشه تجربه بهتری ایجاد نمی کند. پس زمینه باید به محتوا کمک کند، نه اینکه توجه کاربر را از آن بگیرد. ساده نگه داشتن CSS و استفاده از تصویرهای بهینه، نگهداری صفحه را نیز آسان تر می کند.
خطاهای رایج هنگام تنظیم پس زمینه
- استفاده از مسیر اشتباه و نمایش ندادن تصویر در صفحه نهایی
- فراموش کردن
background-repeat: no-repeat برای تصویرهایی که نباید کاشی شوند
- انتخاب تصویر بزرگ بدون توجه به سرعت بارگذاری
- استفاده از متن کم کنتراست روی تصویر شلوغ
- اتکا به
background-attachment: fixed بدون آزمایش در تلفن همراه
- استفاده از
cover بدون بررسی قسمت هایی که از تصویر بریده می شوند
- قرار دادن اطلاعات ضروری فقط در پس زمینه و در دسترس نبودن آن برای برخی کاربران
پرسش های متداول درباره Background در CSS
چطور یک رنگ ساده برای پس زمینه صفحه تعیین کنم؟
ویژگی background-color را برای عنصر مورد نظر تنظیم کنید. برای تغییر زمینه کل صفحه، معمولاً این ویژگی را روی body قرار می دهند.
چطور از تکرار تصویر پس زمینه جلوگیری کنم؟
مقدار no-repeat را برای background-repeat بنویسید. سپس با background-position محل نمایش تصویر را مشخص کنید.
تفاوت cover و contain چیست؟
cover کل محدوده عنصر را می پوشاند و ممکن است بخشی از تصویر را برش دهد. contain تمام تصویر را در محدوده جا می دهد، اما ممکن است تمام فضای عنصر را پر نکند.
آیا می توان چند پس زمینه برای یک عنصر تعریف کرد؟
بله. چند تصویر یا گرادیان را می توان در مقدار background-image با ویرگول از هم جدا کرد. برای کنترل هر لایه، مقادیر موقعیت، اندازه و تکرار را نیز به ترتیب متناظر تنظیم کنید.
چه زمانی بهتر است از تصویر پس زمینه استفاده نکنم؟
اگر تصویر حاوی اطلاعات مهمی است که باید برای همه کاربران قابل دسترسی باشد، بهتر است آن را به صورت یک عنصر تصویر در HTML قرار دهید و متن جایگزین مناسب بنویسید. پس زمینه CSS بیشتر برای جلوه های تزئینی و بصری مناسب است.
جمع بندی
ویژگی Background در CSS راهی انعطاف پذیر برای تعیین رنگ، تصویر، تکرار، جایگاه و رفتار پس زمینه عناصر است. با انتخاب درست هر ویژگی، می توانید ظاهر صفحه را بهبود دهید و در عین حال خوانایی و سرعت آن را حفظ کنید. پیش از انتشار، مسیر فایل ها، نمایش در اندازه های مختلف و کنتراست متن را بررسی کنید تا پس زمینه در کنار محتوای صفحه تجربه کاربری بهتری بسازد. این نکته ها هنگام طراحی سایت نیز به ساخت صفحات منظم و کاربردی کمک می کنند.