یکی از اولین چیزهایی که بعد از اضافه کردن CSS به یک صفحه وب متوجه می‌شوید، تغییر ظاهر و رنگ عناصر است. یک صفحه ساده HTML می‌تواند با چند خط CSS کاملاً متفاوت به نظر برسد؛ اما استفاده از رنگ‌ها فقط به انتخاب یک رنگ زیبا محدود نمی‌شود. باید بدانیم چگونه رنگ متن و پس‌زمینه را کنترل کنیم، چگونه یک تصویر را به عنوان پس‌زمینه قرار دهیم، چگونه اندازه و موقعیت آن را تنظیم کنیم و چطور مطمئن شویم متن روی پس‌زمینه خوانا باقی می‌ماند.

در این مقاله با انواع روش‌های تعریف رنگ در CSS، ویژگی‌های مربوط به پس‌زمینه، تصاویر پس‌زمینه و مهم‌ترین تنظیمات آن‌ها آشنا می‌شویم. در پایان نیز یک پروژه کوچک طراحی می‌کنیم تا این مفاهیم را در یک مثال واقعی به کار ببریم.

نکته: در این مقاله درباره Gradientها فقط در حد آشنایی صحبت می‌کنیم. مبحث Gradient به‌صورت کامل در بخش CSS3 و مقاله مربوط به آن بررسی خواهد شد.

رنگ در CSS چیست؟

در CSS می‌توان برای بخش‌های مختلف یک عنصر رنگ مشخص کرد؛ برای مثال:

• رنگ متن

• رنگ پس‌زمینه

• رنگ حاشیه

• رنگ بخش‌های مختلف رابط کاربری

برای رنگ متن معمولاً از ویژگی color استفاده می‌کنیم:

p {
    color: blue;
}

در این مثال رنگ متن تمام عناصر <p> آبی می‌شود.

برای رنگ پس‌زمینه از background-color استفاده می‌کنیم:

div {
    background-color: lightgray;
}

بنابراین باید از همان ابتدا تفاوت این دو ویژگی را به خاطر بسپارید:

color

برای رنگ محتوا و متن استفاده می‌شود.

background-color

برای رنگ پس‌زمینه عنصر استفاده می‌شود.

روش‌های تعریف رنگ در CSS

CSS روش‌های مختلفی برای مشخص کردن رنگ در اختیار ما قرار می‌دهد. در این مقاله مهم‌ترین روش‌ها را بررسی می‌کنیم.

نام رنگ‌ها

ساده‌ترین روش استفاده از نام‌های آماده رنگ‌ها است:

h1 {
    color: red;
}

p {
    color: blue;
}

div {
    background-color: yellow;
}

برخی نام‌های رایج عبارت‌اند از:

red
blue
green
black
white
yellow
orange
purple
gray
pink

این روش برای مثال‌های ساده و آموزشی بسیار مناسب است؛ اما در پروژه‌های واقعی معمولاً به رنگ دقیق‌تری نیاز داریم.

رنگ‌های HEX

یکی از رایج‌ترین روش‌ها در طراحی وب استفاده از مقدار HEX است.

برای مثال:

color: #ff0000;

رنگ بالا قرمز است.

چند نمونه دیگر:

color: #000000;
color: #ffffff;
color: #ff6600;
color: #3366cc;

به طور ساده می‌توان ساختار HEX را به صورت زیر در نظر گرفت:

#RRGGBB

که در آن:

• RR مقدار قرمز

• GG مقدار سبز

• BB مقدار آبی

را مشخص می‌کند.

برای مثال:

#ff0000

یعنی مقدار قرمز زیاد و مقدار سبز و آبی صفر است؛ بنابراین رنگ قرمز ایجاد می‌شود.

رنگ:

#000000

مشکی است و:

#ffffff

سفید است.

HEX یکی از روش‌های بسیار رایج برای تعریف رنگ در فایل‌های CSS است.

رنگ‌های RGB

روش دیگر استفاده از تابع rgb() است:

color: rgb(255, 0, 0);

این رنگ نیز قرمز است.

RGB از سه مقدار تشکیل شده است:

rgb(red, green, blue)

هر مقدار شدت یکی از سه رنگ اصلی را مشخص می‌کند.

برای مثال:

rgb(255, 0, 0)

قرمز

rgb(0, 255, 0)

سبز

rgb(0, 0, 255)

آبی

و:

rgb(0, 0, 0)

مشکی است.

درک RGB برای کار با رنگ‌ها بسیار مفید است؛ مخصوصاً زمانی که بخواهید رنگ‌ها را به شکل عددی کنترل کنید.

RGBA و شفافیت رنگ

گاهی لازم است علاوه بر رنگ، میزان شفافیت آن را نیز مشخص کنیم.

برای این کار می‌توان از rgba() استفاده کرد:

background-color: rgba(0, 0, 0, 0.5);

چهارمین مقدار میزان شفافیت را مشخص می‌کند.

برای مثال:

0

کاملاً شفاف است.

1

کاملاً غیرشفاف است.

و:

0.5

تقریباً ۵۰ درصد شفافیت دارد.

مثال:

.overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

این تکنیک در طراحی بنرها، تصاویر پس‌زمینه و لایه‌هایی که روی تصویر قرار می‌گیرند بسیار کاربردی است.

رنگ‌های HSL

CSS روش دیگری به نام HSL نیز دارد:

color: hsl(0, 100%, 50%);

HSL از سه بخش تشکیل می‌شود:

Hue
Saturation
Lightness

به ترتیب:

• ته‌رنگ

• اشباع

• روشنایی

برای شروع لازم نیست تمام جزئیات ریاضی HSL را حفظ کنید. کافی است بدانید HSL روش دیگری برای تعریف رنگ است که در بعضی طراحی‌ها کنترل رنگ را ساده‌تر می‌کند.

مثال:

.title {
    color: hsl(220, 80%, 50%);
}

HSLA

مانند RGB، برای HSL نیز می‌توان میزان شفافیت را مشخص کرد:

background-color: hsla(220, 80%, 50%, 0.5);

در اینجا مقدار چهارم میزان شفافیت است.

مقایسه روش‌های تعریف رنگ

به عنوان مثال، یک رنگ قرمز را می‌توان به شکل‌های مختلف نوشت:

color: red;

یا:

color: #ff0000;

یا:

color: rgb(255, 0, 0);

هر سه می‌توانند یک رنگ را نمایش دهند.

در پروژه‌های واقعی معمولاً HEX، RGB/RGBA و HSL/HSLA را بیشتر مشاهده خواهید کرد.

ویژگی color

ویژگی color برای تعیین رنگ متن استفاده می‌شود.

مثال:

h1 {
    color: #ff6600;
}

p {
    color: #333333;
}

در اینجا عنوان نارنجی و متن پاراگراف خاکستری تیره خواهد بود.

می‌توانیم رنگ عناصر مختلف را جداگانه مشخص کنیم:

h1 {
    color: orange;
}

h2 {
    color: #222222;
}

p {
    color: rgb(80, 80, 80);
}

ویژگی background-color

برای تعیین رنگ پس‌زمینه از background-color استفاده می‌کنیم:

.card {
    background-color: #ffffff;
}

مثال کامل:

<div class="card">
    <h2>عنوان کارت</h2>
    <p>این متن داخل یک کارت قرار دارد.</p>
</div>

.card {
    background-color: #f2f2f2;
}

.card h2 {
    color: #222222;
}

.card p {
    color: #555555;
}

در این مثال پس‌زمینه کارت خاکستری بسیار روشن است.

تصویر به عنوان پس‌زمینه

CSS فقط برای رنگ پس‌زمینه نیست. می‌توانیم یک تصویر را نیز به عنوان پس‌زمینه یک عنصر قرار دهیم.

برای این کار از:

background-image

استفاده می‌کنیم.

مثال:

.hero {
    background-image: url("images/banner.jpg");
}

در این مثال فایل:

images/banner.jpg

به عنوان تصویر پس‌زمینه عنصر .hero استفاده می‌شود.

MDN نیز background-image را یکی از ویژگی‌های اصلی سیستم پس‌زمینه CSS معرفی می‌کند و ویژگی‌هایی مانند background-repeat، background-position و background-size برای کنترل نحوه نمایش تصویر در کنار آن استفاده می‌شوند.

مسیر تصویر پس‌زمینه

مسیر تصویر مانند مسیر فایل‌های دیگر باید درست باشد.

فرض کنید ساختار پروژه این باشد:

project/
├── index.html
├── css/
│   └── style.css
└── images/
    └── banner.jpg

در فایل:

style.css

اگر بنویسیم:

.hero {
    background-image: url("images/banner.jpg");
}

مسیر اشتباه است؛ زیرا فایل CSS داخل پوشه css قرار دارد.

مسیر صحیح:

.hero {
    background-image: url("../images/banner.jpg");
}

است.

چون باید ابتدا از پوشه css یک سطح به عقب برگردیم:

..

و سپس وارد images شویم.

جلوگیری از تکرار تصویر

به صورت پیش‌فرض، تصویر پس‌زمینه ممکن است در صورت کوچک بودن نسبت به عنصر، تکرار شود.

برای کنترل این رفتار از:

background-repeat

استفاده می‌کنیم.

مثلاً:

.hero {
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
}

در این حالت تصویر تکرار نمی‌شود.

مقادیر مهم:

background-repeat: repeat;

تکرار در هر دو جهت.

background-repeat: no-repeat;

بدون تکرار.

background-repeat: repeat-x;

تکرار در جهت افقی.

background-repeat: repeat-y;

تکرار در جهت عمودی.

مقدار پیش‌فرض background-repeat برابر repeat است.

موقعیت تصویر پس‌زمینه

گاهی تصویر در محل موردنظر ما قرار نمی‌گیرد.

برای کنترل موقعیت تصویر از:

background-position

استفاده می‌کنیم.

مثال:

.hero {
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

مقدارهای رایج:

top
bottom
left
right
center

برای مثال:

background-position: center;

تصویر را در مرکز قرار می‌دهد.

یا:

background-position: top center;

تصویر را در بالای عنصر و در مرکز افقی قرار می‌دهد.

همچنین می‌توان از مقدارهای عددی و درصدی استفاده کرد:

background-position: 20px 10px;

در ساختار دو مقداری، مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی را مشخص می‌کند.

اندازه تصویر پس‌زمینه

یکی از مهم‌ترین ویژگی‌ها:

background-size

است. دو مقدار مهم می توان به آن اختصاص داد.

مقدار cover

وقتی می‌نویسیم:

background-size: cover;

مرورگر تصویر را به اندازه‌ای تنظیم می‌کند که تمام فضای عنصر را پوشش دهد.

مزیت آن این است که فضای عنصر خالی نمی‌ماند.

اما ممکن است بخشی از تصویر بریده شود.

برای مثال:

.hero {
    height: 400px;
    background-image: url("../images/banner.jpg");
    background-size: cover;
    background-position: center;
}

این ترکیب برای بخش‌های Hero و بنر بسیار رایج است.

مقدار contain

در مقابل:

background-size: contain;

باعث می‌شود کل تصویر در محدوده عنصر جا بگیرد.

در این حالت ممکن است بخشی از فضای عنصر خالی بماند.

بنابراین به صورت ساده:

cover
→ عنصر کاملاً پوشانده می‌شود
→ احتمال بریده شدن تصویر وجود دارد

contain
→ تصویر کاملاً دیده می‌شود
→ احتمال ایجاد فضای خالی وجود دارد

این تفاوت در طراحی رابط کاربری بسیار مهم است.

تفاوت cover و contain در یک مثال

فرض کنید یک تصویر داریم:

banner.jpg

و یک بخش:

.hero {
    width: 100%;
    height: 400px;
}

با:

background-size: cover;

تصویر تمام بخش را پر می‌کند.

اما:

background-size: contain;

تصویر را طوری قرار می‌دهد که خودش کامل داخل محدوده قرار بگیرد.

برای تصاویر تزئینی بزرگ معمولاً cover انتخاب مناسبی است؛ اما برای تصاویری که نباید بریده شوند، contain می‌تواند مناسب‌تر باشد.

ویژگی background-attachment

ویژگی:

background-attachment

مشخص می‌کند تصویر پس‌زمینه نسبت به صفحه چگونه رفتار کند.

یکی از مقادیر آن:

scroll

است که رفتار معمول پس‌زمینه را ایجاد می‌کند.

مقدار دیگر:

fixed

است که تصویر پس‌زمینه را نسبت به viewport ثابت نگه می‌دارد.

برای مثال:

.hero {
    background-image: url("../images/banner.jpg");
    background-attachment: fixed;
}

این ویژگی می‌تواند در بعضی طراحی‌ها استفاده شود، اما در پروژه‌های آموزشی و طراحی‌های Responsive بهتر است فعلاً استفاده از آن را محدود نگه دارید.

ترکیب چند ویژگی پس‌زمینه

معمولاً ویژگی‌های پس‌زمینه را با یکدیگر استفاده می‌کنیم:

.hero {
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

این ترکیب بسیار کاربردی است.

معنای آن:

یک تصویر پس‌زمینه قرار بده
↓
آن را تکرار نکن
↓
در مرکز قرار بده
↓
کل بخش را با تصویر پوشش بده

ویژگی کوتاه‌شده background

CSS یک ویژگی کوتاه‌شده به نام:

background

دارد که می‌تواند چند ویژگی مربوط به پس‌زمینه را در یک خط تنظیم کند.

برای مثال، این کد:

.hero {
    background-color: #222;
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

می‌تواند به شکل کوتاه‌تر نوشته شود:

.hero {
    background: #222 url("../images/banner.jpg") center / cover no-repeat;
}

در ابتدا بهتر است از روش چندخطی استفاده کنید تا هر ویژگی را به‌خوبی درک کنید.

بعد از اینکه با ویژگی‌ها راحت شدید، می‌توانید از shorthand استفاده کنید.

یک نکته مهم درباره background

در shorthand باید به ترتیب مقادیر توجه داشته باشید.

برای مثال:

background: center / cover no-repeat url("../images/banner.jpg");

در اینجا:

center

موقعیت تصویر است.

/

جداکننده موقعیت و اندازه است.

cover

اندازه تصویر است.

و:

no-repeat

نحوه تکرار را مشخص می‌کند.

بنابراین اگر هنوز با shorthand راحت نیستید، استفاده از ویژگی‌های جداگانه کاملاً مناسب است.

چند تصویر پس‌زمینه

CSS حتی امکان استفاده از چند تصویر پس‌زمینه را نیز فراهم می‌کند.

برای مثال:

.banner {
    background-image:
        url("../images/logo.png"),
        url("../images/background.jpg");
}

در این حالت تصاویر به صورت لایه‌ای روی یکدیگر قرار می‌گیرند.

این موضوع برای طراحی‌های پیشرفته‌تر بسیار کاربردی است، اما در این مرحله فقط کافی است با مفهوم آن آشنا باشید.

در CSS، وقتی چند پس‌زمینه مشخص می‌شود، لایه‌ای که اول نوشته شده در جلو قرار می‌گیرد و لایه‌های بعدی پشت آن قرار می‌گیرند.

رنگ و تصویر همزمان

می‌توانیم برای یک عنصر هم تصویر و هم رنگ پس‌زمینه داشته باشیم:

.hero {
    background-color: #222;
    background-image: url("../images/banner.jpg");
}

رنگ می‌تواند زمانی مفید باشد که تصویر بارگذاری نشده باشد یا بخش‌هایی از تصویر شفاف باشند.

همچنین می‌توانیم از رنگ‌های نیمه‌شفاف در طراحی‌های لایه‌ای استفاده کنیم.

خوانایی متن روی تصویر

یکی از اشتباهات رایج این است که یک تصویر زیبا انتخاب کنیم اما متن روی آن خوانا نباشد.

مثلاً:

.hero {
    background-image: url("../images/banner.jpg");
    color: white;
}

ممکن است تصویر بخش‌های بسیار روشن داشته باشد و متن سفید روی آن به‌خوبی دیده نشود.

در طراحی رابط کاربری باید همیشه به کنتراست و خوانایی متن توجه کنیم. MDN نیز در راهنمای پس‌زمینه‌ها بر اهمیت کنتراست مناسب هنگام استفاده از تصاویر پس‌زمینه تأکید می‌کند.

یک راه ساده برای بهبود خوانایی، استفاده از یک لایه نیمه‌شفاف تیره است. در مراحل بعدی CSS روش‌های مختلف انجام این کار را بهتر یاد خواهیم گرفت.

پروژه عملی: طراحی یک Hero Section

حالا یک بخش Hero ساده ایجاد کنیم.

ساختار پروژه:

css-background-project/
├── index.html
├── css/
│   └── style.css
└── images/
    └── hero.jpg

فایل HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>آموزش CSS</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <section class="hero">
        <div class="hero-content">
            <h1>یادگیری طراحی وب</h1>

            <p>
                با HTML و CSS قدم‌به‌قدم طراحی صفحات وب را یاد بگیرید.
            </p>

            <a href="#">شروع یادگیری</a>
        </div>
    </section>

</body>
</html>

فایل CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
}

.hero {
    min-height: 500px;

    background-color: #222;
    background-image: url("../images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: white;
}

.hero-content {
    max-width: 600px;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 16px;
}

.hero p {
    font-size: 18px;
    line-height: 1.8;
}

در این مثال چند موردی که تاکنون یاد گرفته‌ایم در کنار هم قرار گرفته‌اند:

background-color
background-image
background-repeat
background-position
background-size
color

همین چند ویژگی می‌توانند ظاهر یک بخش ساده را کاملاً تغییر دهند.

ساخت یک کارت با پس‌زمینه

حالا یک مثال کوچک دیگر ببینیم:

<div class="card">
    <h2>دوره طراحی وب</h2>
    <p>
        HTML و CSS را از پایه یاد بگیرید.
    </p>
</div>

.card {
    width: 350px;
    min-height: 220px;

    padding: 30px;

    color: white;

    background-color: #222;
    background-image: url("../images/card.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

با این روش می‌توان کارت‌هایی برای:

• محصولات

• خدمات

• دوره‌های آموزشی

• مقالات

• دسته‌بندی‌ها

• بنرها

طراحی کرد.

تفاوت تصویر HTML و تصویر پس‌زمینه CSS

این دو مفهوم را با یکدیگر اشتباه نگیرید.

در HTML:

<img src="images/product.jpg" alt="محصول">

تصویر بخشی از محتوای صفحه است.

اما:

.card {
    background-image: url("../images/product.jpg");
}

تصویر به عنوان پس‌زمینه و بخشی از ظاهر عنصر استفاده می‌شود.

به صورت ساده:

تصویر محتوایی
→ معمولاً با img

تصویر تزئینی یا پس‌زمینه
→ معمولاً با background-image

این تفاوت هنگام طراحی صفحات حرفه‌ای اهمیت زیادی پیدا می‌کند.

اشتباهات رایج

۱. مسیر اشتباه تصویر

مثلاً:

background-image: url("images/banner.jpg");

در حالی که فایل CSS داخل پوشه css است.

ممکن است مسیر صحیح این باشد:

background-image: url("../images/banner.jpg");

۲. فراموش کردن url()

این کد صحیح نیست:

background-image: "image.jpg";

باید بنویسیم:

background-image: url("image.jpg");

۳. تکرار ناخواسته تصویر

اگر تصویر کوچک باشد، ممکن است چند بار نمایش داده شود.

برای جلوگیری:

background-repeat: no-repeat;

۴. استفاده نادرست از cover

گاهی کاربر می‌بیند بخشی از تصویر بریده شده و فکر می‌کند CSS خراب است.

اما:

background-size: cover;

عمداً تصویر را طوری مقیاس می‌کند که کل عنصر را بپوشاند؛ بنابراین ممکن است بخشی از تصویر خارج از محدوده قابل مشاهده قرار بگیرد.

۵. متن ناخوانا روی تصویر

این کد:

color: white;

همیشه به معنی خوانایی خوب نیست.

اگر پس‌زمینه خیلی روشن باشد، متن سفید ممکن است به‌سختی دیده شود.

همیشه نتیجه نهایی را از نظر خوانایی بررسی کنید.

تمرین‌های این مقاله

تمرین ۱

یک صفحه بسازید و رنگ متن سه پاراگراف را با سه روش مختلف تعیین کنید:

نام رنگ
HEX
RGB

تمرین ۲

یک کارت ایجاد کنید و برای آن:

• رنگ پس‌زمینه

• رنگ متن

• تصویر پس‌زمینه

قرار دهید.

تمرین ۳

برای یک تصویر پس‌زمینه این مقادیر را امتحان کنید:

background-size: cover;

و:

background-size: contain;

تفاوت آن‌ها را مشاهده کنید.

تمرین ۴

مقادیر مختلف زیر را امتحان کنید:

background-position: center;
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;

تفاوت محل قرارگیری تصویر را بررسی کنید.

تمرین ۵

یک بنر طراحی کنید که:

• ارتفاع حداقل 400px داشته باشد.

• تصویر پس‌زمینه داشته باشد.

• تصویر تکرار نشود.

• تصویر در مرکز قرار بگیرد.

• اندازه تصویر cover باشد.

• عنوان سفید داشته باشد.

چالش مقاله

یک Hero Section برای یک سایت فروشگاهی طراحی کنید.

بخش شما باید شامل موارد زیر باشد:

عنوان فروشگاه
توضیح کوتاه
یک لینک یا دکمه
تصویر پس‌زمینه
رنگ متن مناسب

سعی کنید با تغییر:

background-position
background-size
background-repeat

به بهترین نتیجه بصری برسید.

در این مرحله هنوز نیازی به استفاده از Gradient، Animation یا افکت‌های پیچیده ندارید. هدف اصلی این تمرین تسلط بر رنگ‌ها و Background است.

نکات مهم این مقاله

بعد از مطالعه این مقاله باید بتوانید:

• ویژگی color را استفاده کنید.

• ویژگی background-color را استفاده کنید.

• رنگ HEX را درک کنید.

• رنگ RGB را استفاده کنید.

• مفهوم RGBA و شفافیت را بدانید.

• با HSL و HSLA آشنا باشید.

• تصویر پس‌زمینه اضافه کنید.

• مسیر تصویر را درست مشخص کنید.

• از background-repeat استفاده کنید.

• از background-position استفاده کنید.

• از background-size استفاده کنید.

• تفاوت cover و contain را بدانید.

• با background-attachment آشنا باشید.

• از shorthand به نام background استفاده کنید.

• تفاوت img و background-image را درک کنید.

• خوانایی متن روی تصویر را بررسی کنید.

جمع‌بندی

رنگ‌ها و پس‌زمینه‌ها از پایه‌ای‌ترین ابزارهای CSS برای تبدیل یک صفحه ساده به یک رابط کاربری جذاب هستند. در این مقاله یاد گرفتیم که برای رنگ متن از color و برای رنگ پس‌زمینه از background-color استفاده کنیم و با روش‌هایی مانند نام رنگ، HEX، RGB، RGBA، HSL و HSLA رنگ موردنظرمان را تعریف کنیم.

همچنین با background-image آشنا شدیم و یاد گرفتیم چگونه با ویژگی‌هایی مانند background-repeat، background-position و background-size نحوه نمایش تصویر را کنترل کنیم. تفاوت cover و contain، مفهوم background-attachment و ویژگی کوتاه‌شده background را نیز بررسی کردیم.

از اینجا به بعد می‌توانیم ظاهر عناصر را بسیار حرفه‌ای‌تر کنترل کنیم. در مقاله بعدی سراغ یکی از مهم‌ترین قسمت‌های طراحی رابط کاربری می‌رویم: فونت‌ها و متن‌ها در CSS.