background یا پس زمینه در CSS

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

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • رنگ پس زمینه هر المان را چطور مشخص کنیم؟
  • تصویر پس زمینه هر المان را چطور مشخص کنیم؟
  • موقعیت و سایز تصویر پس زمینه را چطور مشخص کنیم؟
  • و…

با ما همراه باشین  ;-) 

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

background-color

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

  • کد هگزادسیمال : رنگ را می توان با کد هگزادیسمال به شکل #rrggbb مشخص کرد که rr معرف رنگ قرمز،gg معرف سبز و bb معرف آبی می باشد.این مقادیر بین ۰۰ تا FF قابل تغییر می باشد.
  • (rgb(0-255,0-255,0-255,0-1 :در این شکل از مقداردهی پارامتر اول معرف رنگ قرمز ،پارامتر دوم  معرف سبز و پارامتر سوم معرف آبی و پارامتر چهارم معرف شفافیت می باشد.
  • اسم رنگ

background-image

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

background-position

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

  • به صورت جهت جهت( left top ، left center، left bottom، right top، right center، right bottom، center top، center center، center bottom ) : مقدار پیش فرض این خصوصیت top left (بالا-چپ) می باشد.
  • به صورت درصدی (x : ( %X %Y مقدار افقی و y مقدار عمودی را مشخص می کند. مقدار پیش فرض این خصوصیت ۰% ۰% می باشد یعنی بالا-چپ صفحه. اگر بنویسیم ۱۰۰% ۱۰۰% یعنی پایین-راست صفحه. اگر یک مقدار بنویسیم ، مقدار دیگر به صورت پیش فرض ۵۰% در نظر گرفته می شود.
  • به صورت عددی (Xpx Ypx): مثلا ۰ ۰ بالا-چپ صفحه می باشد.

background-size

اندازه تصویر پس زمینه را تنظیم می کند. مقدار این ویژگی می تواند به شکل های مختلفی باشد:

  • به صورت عددی: Xpx Ypx
  • به صورت درصدی: %X% Y
  • مقدار cover: تصویر به اندازه مکان المان گسترش پیدا می کند.
  • مقدار  Contain: تصویر به اندازه المانی که در داخلش قرار دارد گسترش پیدا می کند البته با حفظ تناسب.
  • مقدار auto: یعنی سایز خود تصویر(به صورت پیشفرض هم این مقدار می باشد)

background-repeat

این ویژگی تکرار تصویر پس زمینه را تنظیم می کند. به صورت:

  • Repeat: تصویر در دو راستای عمودی و افقی تکرار شود.(پیشفرض همین مقدار می باشد)
  • repeat-x : تصویر در راستای افقی تکرار شود.
  • repeat-y: تصویر در راستای عمودی تکرار شود.
  • no-repeat: تکرارنشود.

background-attachment

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

  • scroll: تصویر پس زمینه همراه با عنصر، اسکرول می شود(به صورت پیش فرض این مقدار را دارد)
  • Fixed: تصویر پس زمینه ثابت می باشد و اسکرول در آن تاثیری ندارد.
  • Local: تصویر پس زمینه همراه با با محتویات عنصر اسکرول می شود.

 

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

مثال:

کد html زیر را در سند خود وارد کنید:

<!DOCTYPE html>
<html  lang=”fa” dir=”rtl”>
    <head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<meta charset=”utf-8″>
      <title>
          اینجا عنوان سایت است
      </title>
   </head>
 </body>
      <p>آشنایی با خصوصیت background </p>
   </body>
</html>

کدهای css هم به شکل زیر وارد می کنیم. عملکرد خصوصیات گفته شده را روی المان کلی body مشاهده می کنیم:

body{
/*مشخص کردن رنگ پس زمینه*/

background-color: rgb(100,2,200);

/*مشخص کردن تصویر پس زمینه*/
background-image: url(‘1.jpg’);

/*مشخص کردن حالت تکرار تصویر*/
background-repeat:no-repeat ;

/*مشخص کردن مکان تصویر*/
background-position: center center;

/*مشخص کردن ثابت بودن یا حرکت کردن تصویر*/
background-attachment: fixed;

/*مشخص کردن سایز تصویر*/
background-size: 500px 500px;

/*مشخص کردن رنگ نوشته*/
color: #ffffff;

/*مشخص کردن سایز و فونت و ارتفاع نوشته*/
font: 20px/2000px  tahoma;
}

نتیجه اجرا:

تکرار می کنم  مثال ما همه مقادیر را در برنمیگیرد ، پس سعی کنید با دادن هر مقدار به خصوصیت ها تفاوت ها را درک کنید.

background یا پس زمینه در CSS

نکته: برای کوتاه شدن کدها می توانیم تمام مقادیر مربوط به پس زمینه یا background در CSS را به شکل زیر بنویسیم:

background: rgb(100,2,200) url(‘1.jpg’) no-repeat center center  fixed  ۵۰۰px 500px ;

نکته : نحوه کامنت گذاشتن در سند css به صورت زیر می باشد:

/*

کامنت

*/

نحوه کامنت گذاشتن در سند html:

<!–

کامنت

–>

خب آموزش ما اینجا به پایان رسید. به صورت خلاصه با خصوصیت background یا پس زمینه در CSS آشنا شدیم که به صورت خلاصه می توانید ببینید:

property در css
ناممقادیر
توضیح
background-colorکدهگزا دسیمال،اسم رنگ،rgb تعیین رنگ پس زمینه هر المان html
background-imageتعیین تصویر پس زمینه یک المان
background-positionبه صورت جهت جهت،عددی،درصدیتعیین مکان قرارگیری تصویر پس زمینه یک المان
background-sizeبه صورت عددی،درصدی،cover،contain،autoتعیین کننده اندازه تصویر پس زمینه
background-repeatrepeat،repeat-x،repeat-y،no-repeatتعیین تکرار تصویر پس زمینه
background-attachmentscroll،fixed،localتعیین مکان تصویر پس زمینه با اسکرول  

 

 

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 3 امتیاز: 4]