پس‌زمینه در CSS
متن را می‌توانید رنگ کنید. حالا سطح پشت آن را رنگ بزنید. پس‌زمینه جعبهٔ عنصر را پر می‌کند — رنگ یکدست، عکس، و بعداً گرادیان — در حالی که حروف با color روی آن می‌مانند.
پس‌زمینهٔ CSS چیست؟
پس‌زمینه لایه‌ای است که پشت محتوای عنصر (و معمولاً پشت ناحیهٔ padding) کشیده می‌شود. با خانواده‌ای از ویژگی‌ها کنترلش می‌کنید: background-color، background-image، background-repeat، background-size، background-position و میان‌بر background. گرادیان درس جدا دارد — امروز پر کردن یکدست و پایهٔ تصویر.
ویژگی‌ها در یک نگاه
اول کار هر کدام را بشناسید. روز اول همهٔ کلیدواژه‌ها لازم نیست.
📊 ویژگی‌های روزمرهٔ پس‌زمینه CSS
| ویژگی | کار | شروع روزمره |
|---|---|---|
background-color |
پر کردن یکدست پشت محتوا | background-color: #f1f5f9; |
background-image |
لایهٔ عکس (یا بعداً گرادیان) | background-image: url("hero.jpg"); |
background-repeat |
کاشی کردن یا توقف کاشی | background-repeat: no-repeat; |
background-size |
مقیاس تصویر در جعبه | background-size: cover; |
background-position |
هم‌تراز کردن تصویر | background-position: center; |
background |
میان‌بر چندتایی | background: #0f172a url("a.jpg") center / cover no-repeat; |
پر کردن یکدست با background-color
ساده‌ترین پس‌زمینه یک رنگ توپر است. هر مقدار رنگی که بلدید — نام‌دار، hex، rgb یا hsl — اینجا هم کار می‌کند.
پس‌زمینهٔ یکدست کارت
css.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}متن خوانا بماند
برای حروف color بگذارید و برای جعبه background-color. پر کردن روشن به متن تیره‌تر نیاز دارد؛ پر کردن تیره به متن روشن‌تر.
تصویر با background-image
با url("…") به فایل اشاره کنید. مسیر نسبت به فایل CSS است (یا URL مطلق). تصویر پشت محتوا می‌نشیند — مثل <img> داخل جریان HTML نیست.
عکس پشت بلوک hero
css.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}تصویر در برابر <img>
وقتی عکس محتواست (متن جایگزین، معنا) از <img> استفاده کنید. وقتی عکس تزئین پشت رابط یا بخش صفحه است، background-image مناسب‌تر است.
کاشی را قطع کنید: no-repeat + cover
به‌طور پیش‌فرض خیلی از مرورگرها تصویر کوچک را کاشی می‌کنند. برای hero تکرار را خاموش کنید و با cover مقیاس بدهید تا عکس جعبه را پر کند.
تصویر hero که جعبه را پر می‌کند
css.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}cover در یک جمله
cover تصویر را بزرگ می‌کند تا جعبه پر شود — لبه‌ها ممکن است بریده شوند. contain کل تصویر را داخل جا می‌دهد — شاید نوار خالی ببینید.
نقطهٔ کانون را تنظیم کنید
background-position می‌گوید کدام بخش عکس دیده بماند — وقتی cover صورت یا لوگو را می‌بُرد، به‌درد می‌خورد.
هدف‌گیری عکس
css.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}میان‌بر (خوانا بماند)
می‌توانید چند مقدار را در background جمع کنید. موقع یادگیری با جدا جدا شروع کنید؛ وقتی ترتیب آشنا شد سراغ میان‌بر بروید.
میان‌بر فشردهٔ background
css.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}نکتهٔ ترتیب
الگوی رایج: رنگ، تصویر، position / size، repeat. اگر میان‌بر گیج‌تان کرد، دوباره جدا بنویسید — هر دو معتبرند.
خودتان امتحان کنید
- یک
.cardباbackground-color: #f1f5f9و متن تیره باcolor. - یک
.heroباbackground-image: url("…")،min-heightو متن روشن. - بگذارید
background-repeat: no-repeat،background-size: coverوbackground-position: center. - position را به
left centerیاright centerببرید و ببینید چه چیزی در قاب می‌ماند. - اختیاری: همان hero را با میان‌بر
backgroundبازنویسی کنید و قبل ازurl()یک رنگ پشتیبان بگذارید.
اشتباهات رایج
- نوشتن
colorوقتی منظورتان پر کردن جعبه است — آن فقط حروف را رنگ می‌کند - فراموش کردن
no-repeatتا لوگو سراسر بخش کاشی شود - مسیر خراب در
url("…")(پوشهٔ اشتباه یا بدون نقل‌قول) - عکس‌های خیلی بزرگ و فشرده‌نشده به‌عنوان پس‌زمینه — صفحه کند می‌شود
- پریدن به گرادیان پیچیده قبل از جا افتادن رنگ یکدست + یک تصویر (گرادیان درس بعد است)
خلاصه
- پس‌زمینه پشت محتوا می‌نشیند؛
colorمتن را رنگ می‌کند - برای پر یکدست
background-color؛ برای عکسbackground-image - با
no-repeat،cover/containوpositionعکس را کنترل کنید - میان‌بر اختیاری است — موقع یادگیری شفافیت از زرنگی مهم‌تر است
- دستور پخت کامل گرادیان برای درس بعد
- یک کارت خاکستری و یک hero عکسی تمرین کنید تا نام ویژگی‌ها بنشیند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود