CSS

جلسه 4: تنظیم پس زمینه یا Background در CSS

خاصیت پس زمینه یا background در CSS، برای تعریف جلوه های پس زمینه عناصر استفاده می شود.

خواص پس زمینه CSS عبارت اند از:

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

background-color

خصوصیت background-color، رنگ پس زمینه یک عنصر را مشخص می کند.

همانطور که در مثال زیر می بینید، به عنصر div، خاصیت background-color با مقدار lightblue داده ایم.

See the Pen VqxmXZ by hadi (@hadihaji) on CodePen.0

برای اعمال رنگ از چند طریق می توان اقدام کرد:
  • استفاده از نام رنگ، به عنوان مثال: “red”
  • استفاده از کد رنگ HEX به عنوان مثال: ff0000#
  • استفاده از کد رنگ RGB به عنوان مثال: (255,0,0)RGB

برای مشاهده لیست کامل مقادیر رنگ پیشنهاد می شود مطلب نام و کد رنگ ها در CSS را مطالعه نمایید.

Background Image

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

به طور پیش فرض، تصویر تکرار می شود و کل عنصر را پوشش می دهد.

background-image: url(“Picture Address”);

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

See the Pen Vqxmyo by hadi (@hadihaji) on CodePen.0

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

Background repeat

در حالت پیش فرض در صورتی که از ویژگی background-repeat استفاده نکنید تصویر مورد نظر اینقدر تکرار خواهد شد که محدوده عنصر را کاملا پوشش دهد، در صورتی که میخواهید تصویر تکرار نشود میبایست از ویژگی background-repeat استفاده کنید و مقدار آن را برابر no-repeat قرار دهید.

  background-repeat: no-repeat;

در صورت عدم استفاده از خاصیت no-repeat:

See the Pen jXxVxG by hadi (@hadihaji) on CodePen.0

همانطور که در نتیجه فوق می بینید تصویر برای اینکه تمام کادر را پوشش دهد بدلیل عدم استفاده از خاصیت no-repeat تکرار شده است.

در صورت استفاده از تگ no-repeat:

See the Pen VqxmdZ by hadi (@hadihaji) on CodePen.0

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;

مثال:

See the Pen wRjoYJ by hadi (@hadihaji) on CodePen.0

background attachment

 background-attachment دارای دو مقدار است:

  • scroll: اسکرول حالت پیشفرض این خاصیت است، یعنی زمانی که نوار اسکرول می شود تصویر هم اسکرول شود.
  • fixed: زمانی که نوار اسکرول می شود تصویر پس زمینه ثابت می ماند.

در مثال زیر خاصیت background-attachment با fixed مقداردهی شده است:

See the Pen wRjoQd by hadi (@hadihaji) on CodePen.0

همانطور که در مثال فوق مشاهده می کنید با اسکرول نوار، تصویر ثابت می ماند.

 

جلسه بعد 

جلسه قبل

امتیاز

میانگین امتیاز

امتیاز کاربران: اولین نفر باشید!
برچسب ها

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سه × یک =

دکمه بازگشت به بالا
بستن