Background (پس زمینه) در CSS

با سلام و عرض ادب خدمت همراهان گرامی روکسو، در این قسمت قصد داریم در رابطه با خاصیت Background در زبان CSS صحبت کنیم. Background به معنای پس زمینه است و اصطلاحی کلی برای چندین خصوصیت مختلف (مانند background-color و background-image و ...) می باشد. بیایید تک تک آن ها را بررسی کنیم.

خصوصیات Background

خصوصیات مختلف Background یا پس زمینه در CSS، همانطور که از نامشان مشخص است، مربوط به تعیین ویژگی های پس زمینه ی عناصر در صفحه ی وب ما هستند.

به طور مثال background-color رنگ پس زمینه را برای عناصر صفحه ی وب ما تغییر می دهد و background-image به جای رنگ، تصویری در پس زمینه قرار می دهد.

امروز به بررسی موارد زیر می پردازیم:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color

background-color در لغت به معنی «رنگ پس زمینه» می‌باشد و مشخصا برای پس زمینه ی ما رنگ خاصی را تعیین می کند.

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

نام رنگ (نمی توانید از هر نامی استفاده کنید، باید قبلا در CSS تعریف شده باشد)
به صورت HEX (با استفاده از علامت # و سپس چیزی مثل ff0000)
به صورت RGB (مانند (rgb(255,0,0 )

اگر در این رابطه چیزی نمی دانید مقاله ی زیر را مطالعه کنید:

قالب های رنگی در CSS

البته باید توجه داشت که تعیین رنگ برای کل صفحه تنها یک مثال بود. می توان خاصیت background-color را برای هر عنصر به صورت جداگانه نیز تعریف کرد:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

Background Image

خاصیت background-image به جای تعیین یک رنگ برای پس زمینه، یک تصویر را برای آن تعیین می کند.

در حالت پیش فرض این خصوصیت از نوع repeated (به معنی «تکرار شده») می باشد؛ اگر سایز تصویر شما کوچک باشد و شما آن را برای پس زمینه انتخاب کنید، تصویر، repeat یا تکرار می شود تا تمام فضا را پُر کند. به خروجی کد زیر نگاه کنید تا متوجه مفهوم repeated بشوید:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.roxo.ir/blog-panel/wp-content/uploads/2019/03/roxo-plus-new.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

اگر دقت کرده باشید، تصویر پس زمینه هم به صورت افقی و هم به صورت عمودی تکرار شده است تا فضای صفحه را پر کند اما برخی تصاویر وجود دارند که تنها باید افقی یا عمودی تکرار شوند و گرنه ظاهر زشتی پیدا می کنند. یک مثال از تکرار شدن تصویر که صفحه را زشت می کند از این قرار است:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.w3schools.com/css/gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

مشاهده ی خروجی در JSBin

از آن جا که طرح ما مکررا شکسته شده، صفحه را از زیبایی اش محروم کرده است. ما می توانیم با استفاده از دستور ;background-repeat: repeat-x کاری کنیم که تکرار تصویر تنها روی محور x (محور افقی) اتفاق بیوفتد. اگر این کار را انجام دهیم خروجی به این شکل در می آید:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: white;
  background-image: url("https://www.w3schools.com/css/gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: چرا کد ;background-color: white به استایل ها اضافه شده است؟

پاسخ: در JSBin به دلیل سلیقه ی شخصی طراح سایت، رنگ پس زمینه از حالت پیش فرض (یعنی سفید) به خاکستری ملایم در آمده است. برای زیبا نشان داده شدن طرح ما، من این مقدار را دوباره روی سفید تنظیم کرده ام تا طرح به بهترین شکل نمایش داده شود. در حالت عادی شما به این کد نیازی نخواهید داشت.

نکته: اگر خواستید تصویر شما فقط در راستای محور Y (محور عمودی) تکرار شود می توانید از دستور ;background-repeat: repeat-y استفاده کنید (حالت پیش فرض، تکرار در هر دو جهت است).

اما گاهی اوقات طرحی داریم که نمی خواهیم تکرار شود، نه روی محور x و نه روی محور y. در این صورت باید از دستور background-repeat استفاده کرده و مقدار no-repeat را به آن بدهیم. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.w3schools.com/css/img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>مثالی از تصویر پس زمینه بدون تکرار</p>
<p>تصویر پس زمینه در این مثال تنها یک بار تکرار می شود اما خواندن متن را برای کاربر دشوار می کند</p>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به خروجی این کد نگاهی بیندازید متوجه می شوید که تصویر پس زمینه تکرار نمی شود اما دقیقا پشت سر متن قرار گرفته است و خواندن متن را برای کاربر دشوار می کند. بنابراین باید مکان آن را تغییر دهیم. برای این کار می توان از دستور background-position استفاده کرد:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.w3schools.com/css/img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 210px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p dir='rtl'>مثالی از تصویر پس زمینه بدون تکرار</p>
<p dir='rtl'>تصویر پس زمینه در این مثال تنها یک بار تکرار می شود اما خواندن متن را برای کاربر دشوار می کند</p>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا اگر به خروجی نگاهی بیندازید متوجه زیبایی صفحه می شوید. در ضمن نگران دستور margin-right نباشید چرا که در قسمت های آینده به شکل کامل با آن آشنا خواهیم شد اما فعلا به طور خلاصه برایتان می گویم که کار آن تعیین محدوده است. وقتی می گوییم margin-right برابر 210 پیکسل باشد یعنی از سمت راست 210 پیکسل محدوده تعیین کن تا چیزی (در این مثال، همان نوشته هایمان) وارد آن قسمت نشود.

موقعیت ثابت در Background Image

در حالت طبیعی و پیش فرض، تصاویر پس زمینه همراه دیگر اجزای صفحه اسکرول می شوند اما اگر بخواهیم تصویر پس زمینه کاملا ثابت باشد و از جایش تکان نخورد چه؟ در این حالت می توانیم از background-attachment استفاده کنیم. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.w3schools.com/css/img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p align='center'>اگر صفحه برایتان قابل اسکرول نیست، سایز پنجره ی مرورگرتان را کوچک تر کنید.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که در خروجی مشاهده می کنید، با اسکرول کردن صفحه، تصویر پس زمینه ی ما ثابت است و در کنار صفحه باقی می ماند. برای امتحان می توانید کد background-attachment را بردارید تا متوجه تغییر آن شوید.

background-position یا موقعیت فیزیکی پس‌زمینه

در حالت پیش فرض تصاویر پس زمینه ی شما در سمت بالا و چپ صفحه قرار می گیرند اما شما می توانید با دستور background-position موقعیت آن ها را تغییر دهید. کلیدواژه هایی که می توانید به background-position بدهید از این قرار اند:

left top (به معنی بالا و چپ)
left center (به معنی وسط و چپ)
left bottom (به معنی پایین و چپ)
right top (به معنی راست و بالا)
right center (به معنی وسط و راست)
right bottom (به معنی راست و پایین)
center top (به معنی وسط و بالا)
center center (به معنی وسط و وسط -> یعنی هم روی محور عرض ها و هم روی محور طول ها وسط هستند)
center bottom (به معنی وسط و پایین)

این مقادیر به صورت محور عمودی و افقی هستند بنابراین right top به معنی این است که بالای صفحه و سمت راست آن باش. همانطور که از معنی این کلمات مشخص است می توانیم از آن ها برای قرار دادن عناصر در قسمت های مختلف صفحه استفاده کنیم. البته اگر تنها یکی از این کلمات را هم انتخاب کنید، مشکلی ایجاد نمی شود. به طور مثال اگر می خواهید تصویرتان دقیقا وسط صفحه باشد از center استفاده می کنید. در مثال بالا به عنصر خود مقدار right top را داده ایم اما شما می توانید با تغییر دادن آن به left center و انواع این مقادیر، تفاوت ها را با چشم خود ببینید.

نکته: شما می توانید به جای استفاده از کلیدواژه ها و برای دقیق تر بودن، از پلکسل یا درصد استفاده کنید؛ در این حالت اولین عددی که به آن بدهید فاصله از چپ و دومین عدد فاصله از بالای صفحه خواهد بود.

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.w3schools.com/css/img_tree.png");
  background-repeat: no-repeat;
  background-position: 450px 300px;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p align='center'>اگر صفحه برایتان قابل اسکرول نیست، سایز پنجره ی مرورگرتان را کوچک تر کنید.</p>

</body>
</html>

مشاهده ی خروجی در JSbin

این مثال همان مثال قبلی است اما به جای استفاده از top right از 450 و 300 پیکسل استفاده کرده ایم که به ترتیب فاصله از چپ و بالای صفحه هستند. در بحث positioning در قسمت های بعدی بیشتر با تعیین مکان عناصر HTML آشنا خواهیم شد.

دستور جایگزین

شاید برایتان جالب باشد اگر بدانید که تمامی این دستورها را می توان در یک دستور خلاصه کرد!! بله، در یک دستور! زبان CSS خصوصیتی به نام background را معرفی کرده است که می تواند تمام این دستورها را در خود خلاصه کند. طرز کارش نیز به این شکل است که شما دستور background را نوشته و مقادیر دستور های دیگر را به آن می دهید! به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("https://www.w3schools.com/css/img_tree.png") no-repeat right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به دستور background نگاهی بیندازید می بینید که تمامی مقادیر دستورات دیگر را به آن داده ایم و بدون هیچ مشکلی شاهد کار کردن آن هستیم. از نظر پشتیبانی در مرورگر ها نیز خیالتان راحت باشید چرا که این دستور در تمامی مرورگر ها پشتیبانی می شود.

امیدوارم از این قسمت نیز لذت برده باشید.