جلسه 4: تنظیم پس زمینه یا Background در CSS
خاصیت پس زمینه یا background در CSS، برای تعریف جلوه های پس زمینه عناصر استفاده می شود.
خواص پس زمینه CSS عبارت اند از:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
خصوصیت background-color، رنگ پس زمینه یک عنصر را مشخص می کند.
همانطور که در مثال زیر می بینید، به عنصر div، خاصیت background-color با مقدار lightblue داده ایم.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VqxmXZ” default_tab=”html,result” user=”hadihaji”]See the Pen <a href=’https://codepen.io/hadihaji/pen/VqxmXZ/’>VqxmXZ</a> by hadi (<a href=’https://codepen.io/hadihaji’>@hadihaji</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]برای اعمال رنگ از چند طریق می توان اقدام کرد:
- استفاده از نام رنگ، به عنوان مثال: “red”
- استفاده از کد رنگ HEX به عنوان مثال: ff0000#
- استفاده از کد رنگ RGB به عنوان مثال: (255,0,0)RGB
برای مشاهده لیست کامل مقادیر رنگ پیشنهاد می شود مطلب نام و کد رنگ ها در CSS را مطالعه نمایید.
Background Image
برای اعمال پس زمینه از نوع تصویر به یک عنصر، بایستی از خصوصیت background-image استفاده کنید.
به طور پیش فرض، تصویر تکرار می شود و کل عنصر را پوشش می دهد.
background-image: url(“Picture Address”);
برای اعمال پس زمینه تصویری از دستورات زیر استفاده کنید:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”Vqxmyo” default_tab=”html,result” user=”hadihaji”]See the Pen <a href=’https://codepen.io/hadihaji/pen/Vqxmyo/’>Vqxmyo</a> by hadi (<a href=’https://codepen.io/hadihaji’>@hadihaji</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]همانطور که در دستورات فوق مشاهده می کنید برای آدرس دهی فایل تصویری بایستی از تگ url استفاده کنید. این نکته را در نظر داشته باشد که فایل تصویری بایست به طور صحیح آدرس دهی شود. اگر که فایل تصویری شما داخل چندین پوشه تودرتو قرار دارد، بایستی آدرس پوشه ها به ترتیب نیز قید شود.
Background repeat
در حالت پیش فرض در صورتی که از ویژگی background-repeat استفاده نکنید تصویر مورد نظر اینقدر تکرار خواهد شد که محدوده عنصر را کاملا پوشش دهد، در صورتی که میخواهید تصویر تکرار نشود میبایست از ویژگی background-repeat استفاده کنید و مقدار آن را برابر no-repeat قرار دهید.
background-repeat: no-repeat;
در صورت عدم استفاده از خاصیت no-repeat:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jXxVxG” default_tab=”html,result” user=”hadihaji”]See the Pen <a href=’https://codepen.io/hadihaji/pen/jXxVxG/’>jXxVxG</a> by hadi (<a href=’https://codepen.io/hadihaji’>@hadihaji</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]همانطور که در نتیجه فوق می بینید تصویر برای اینکه تمام کادر را پوشش دهد بدلیل عدم استفاده از خاصیت no-repeat تکرار شده است.
در صورت استفاده از تگ no-repeat:
Background position
ویژگی background-position برای تغییر موقعیت تصویر استفاده میشود.
مقادیری که این ویژگی می گیرد عبارت اند از:
left top: محور افقی= چپ | محور عمودی= بالا
background-position: left top;
left center: محور افقی= چپ | محور عمودی= وسط
background-position: left center;
left bottom: محور افقی= چپ | محور عمودی= پایین
background-position: left bottom;
right top: محور افقی= راست | محور عمودی= بالا
background-position: right top;
right center: محور افقی= راست | محور عمودی= وسط
background-position: right center;
right bottom: محور افقی= راست | محور عمودی= پایین
background-position: right bottom;
center top: محور افقی= وسط | محور عمودی= بالا
background-position: center top;
center center: محور افقی= وسط | محور عمودی= وسط
background-position: center center;
x %y%: موقعیت افقی و عمودی بر اساس درصد
background-position: 50% 50%
xpos ypos: محور افقی و عمودی بر اساس پیکسل. XPOS معرف محور افقی و YPOS معرف محور عمودی.
background-position: 100px 100px;
initial: مقدار پیشفرض را تنظیم می کند.
background-position: initial;
inherit: ویژگی را از عنصر پدر خود به ارث می برد.
background-position: inherit;
background size
برای تغییر اندازه تصویر می توانید از خاصیت background-size استفاده نمایید.
فرمت خاصیت background-size به صورت زیر است:
background-size: value1 value2
background-size دارای مقادیر زیر است:
auto: مقدار پیش فرض. تصویر پس زمینه در اندازه اصلی آن نمایش داده می شود.
background-size: auto;
cover: تصویر را بصورت کامل پوشش می دهد.
background-size: cover;
contain: تصویر پس زمینه را تغییر می دهد تا اطمینان حاصل کنید که تصویر کاملا قابل مشاهده است.
background-size: contain;
استفاده از واحد درصد: عرض و ارتفاع تصویر پس زمینه را بر اساس درصد تنظیم می کند. مقدار اول عرض و مقدار دوم ارتفاع را تنظیم می کند. اگر فقط یک مقدار داده شود، مقدار دوم به “auto” تنظیم می شود.
background-size: 100% 100%;
استفاده از طول: عرض و ارتفاع تصویر پس زمینه را تنظیم می کند. مقدار اول عرض را و مقدار دوم ارتفاع را تنظیم می کند. اگر فقط یک مقدار داده شود، مقدار دوم به “auto” تنظیم می شود.
background-size: 100px 100px;
مثال:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wRjoYJ” default_tab=”css,result” user=”hadihaji”]See the Pen <a href=’https://codepen.io/hadihaji/pen/wRjoYJ/’>wRjoYJ</a> by hadi (<a href=’https://codepen.io/hadihaji’>@hadihaji</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
background attachment
background-attachment دارای دو مقدار است:
- scroll: اسکرول حالت پیشفرض این خاصیت است، یعنی زمانی که نوار اسکرول می شود تصویر هم اسکرول شود.
- fixed: زمانی که نوار اسکرول می شود تصویر پس زمینه ثابت می ماند.
در مثال زیر خاصیت background-attachment با fixed مقداردهی شده است:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wRjoQd” default_tab=”html,result” user=”hadihaji”]See the Pen <a href=’https://codepen.io/hadihaji/pen/wRjoQd/’>wRjoQd</a> by hadi (<a href=’https://codepen.io/hadihaji’>@hadihaji</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]همانطور که در مثال فوق مشاهده می کنید با اسکرول نوار، تصویر ثابت می ماند.
