خاصیت Background در CSS

در CSS3 خاصیت های بسیاری را می توان به عنوان تصویر زمینه یا همان Background تعریف کرد با این کار از مستقیم به سرقت رفتن تصاویر می توان جلوگیری کرد همچنین نیازی به تعریف بخش جدا برای قرار دادن تصویر و اشغال فضا بر حسب پیکسل نیست، شما در این آموزش با Background Property در CSS3 آشنا خواهید شد.

Background:

توسط این خاصیت شما می توانید یک تصویر را به عنوان تصویر زمینه یک جدول ، یک div و یا یک صفحه قرار بدهید شما می توانید از تصویر یا رنگ به عنوان زمینه استفاده کنید برای این کار به 2 مثال زیر توجه کنید:

 

استفاده از رنگ به عنوان زمینه استفاده از تصویر به عنوان زمینه
background: #F90; background: url(/images/yourimage.jpg);


 در مورد استفاده از این خاصیت اگر بخواهید از رنگ استفاده کنید تنها کافی است کد رنگ (کد 6 کاراکتری یا 3 کاراکتری) را پس از علامت # بزنید جهت استفاده از حالت دوم یعنی استفاده از تصویر نیز کافی است داخل پرانتز آدرس تصویر خود را قرار دهید که می تواند به صورت لوکال یا از روی سایر سرورها باشد.

توجه کنید این 2 دستور تنها بخشی از خاصیت background بودند بنابراین در ادامه به بررسی این دو خاصیت به صورت زیر مجموعه ای از دستور background و سایر خاصیت ها می پردازم.


Background Color :

این دستور در واقع استفاده از background به شکل رنگ می باشد که در مثال بالا دیدید اما می توان آنرا به شکل جزئی تر نیز استفاده کرد یعنی : background-color:#F90

که مقدار رنگ را می توان به 3 شکل بیان کرد که عبارتند از :

  • کد رنگ (HEX) مانند : #FF0000
  • 3 رنگ RGB مانند : rgb(255,0,0) RGB Colors
  • نام رنگ مانند : Red

به عنوان مثال می توانید استفاده از هر 3 حالت را در جدول پایین مشاهده کنید :

background-color:red background-color:rgb(255,255,0) background-color:#F90


Background Image :

این خصلت برای background در واقع یک تصویر را به عنوان زمینه قرار می دهد این مورد را در مثال ابتدای صفحه مشاهده کردید بنابراین در اینجا تنها به بیان چگونگی آن در قالب یک مثال می پردازم:

background-image: url('/paper.gif');

 

Background Image - Repeat Horizontally or Vertically :

حتماً تا کنون بارها وب سایت هایی را مشاهده کرده اید که از یک طرح منظم و یا نا منظم جهت ایجاد تصویر زمینه خود استفاده کرده اند در واقع به این کار می گویند استفاده از پترن ( Pattern ) یا الگو ، در وب سایت من نیز زمینه در واقع یک طرح تکرار شونده یا یک الگو می باشد استفاده از تصویر زمینه به این شکل باعث کاهش حجم تصویر زمینه و در نتیجه افزایش سرعت لود ( Load ) وب سایت شما می شود برای این کار کافی است یک تصویر کوچک تهیه کنید که شامل طرح مورد نظر شما است و سپس آن را در راستای محورهای x یا y و یا هردو محور تکرار کنید به مثال های زیر توجه کنید :

 

 

repeat - x

 

 

repeat - y

 

 

repeat x and y

اکنون کدی را که در این بخش استفاده شده است در هر 3 حالت ببینید :

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;

 

Background Image - Set position and no-repeat :
در قسمت قبلی آموزش استفاده از خصلت های background آموختید که می توان یک تصویر را تکرار کرد اما گاهی نیاز هست تصویر تکرار نشود و در یک موقعیت مشخص قرار بگیرد بنابراین بایستی در ویژگی قبلی از no-repeat استفاده کرد و با attribute جدید position آشنا شد که می تواند دو مقدار دریافت کند که میزان فاصله از دو قسمت صفحه مثل بالا و راست یا پایین و چپ و... را دریافت کند همچنین می توان تصویر را با بیان خود کلمات left و right و... به گوشه صفحه چسباند به مثال زیر توجه کنید :

این یک مثال است که به جغد می رسد!!!

background-repeat: no-repeat;

background-position: left top;

Background Image - Set position and no-repeat

ناحیه کاربری