آموزش طراحی وب

Background در Css

در این جلسه ی آموزشی در رابطه با Background و تمامی خاصیت های Background مانند background-clip و … صحبت می کنیم .

CSS

فصل چهارم : Properties در  CSS

جلسه اول  : Background در Css

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در فصل چهارم از CSS تمامی Property های موجود در CSS2 و  CSS3 رو طی چندین جلسه براتون توضیح میدم . در این جلسه ی آموزشی راجع به  Background صحبت می کنیم .

Background  چیست؟

لازم دیدم برای دوستانی که تازه با  css آشنا شدن یه توضیح مختصری بدم . زمانی که شما بخواین برای پس زمینه یا به اصطلاح wallpaper سایتتون یه تصویر در نظر بگیرید از خاصیت Background استفاده می کنید .

به تصویر زیر دقت کنید ، تصویری که بصورت یک کاغذ نمایش داده شده تصویر Background صفحه ی وب به شمار میاد .

 Background در Css

این خاصیت در تمامی مرورگرها پشتیبانی میشه و مشکلی از بابت مرورگرها وجود نداره . Background شامل خاصیت های زیر میشه :

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

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

background-position: 120px 150px  بصورت پیکسلی مختصات میدید .

background-position:left میتونید تعیین کنید تصویر پس زمینه در سمت چپ ، راست  ، بالا یا پایین قرار بگیره .

background-size : این خاصیت در CSS3  وارد دنیای وب شد . از این خاصیت میتویند برای تعیین اندازه ی تصویر پس زمینه استفاده کنید . مثال :

background-size:80px 60px بصورت پیکسلی میتونید عرض و ارتفاع مشخص کنید .

background-size:100% 100%  بصورت درصدی میتونید عرض و ارتفاع مشخص کنید .

background-size:cover  عرض تصویر رو با توجه به عرض صفحه بزرگ میکنه ، ارتفاع رو نیز با توجه به عرض بزرگ می کنه . ممکنه بخشی از تصویر در ارتفاع حذف بشه و خارج از صفحه قرار بگیره و نمایش داده نشه . چون ممکنه ارتفاع صفحه کمتر از عرض صفحه باشه

background-size:contain ارتفاع تصویر رو با توجه به ارتفاع صفحه بزرگ می کنه و عرض تصویر رو نیز با توجه به ارتفاع تغییر میده و نهایتا تمام تصویر نمایش داده میشه اما ممکنه تصویر تمام صفحه رو پر نکنه .

background-size:intial  تصویر پس زمینه بصورت عادی و در اندازه ی واقعی تصویر ، نمایش داده میشه .

این خاصیت در مرورگرهای IE9+, Firefox, Opera, Chrome, Safari پشتیبانی میشه .

background-repeat : با این خاصیت میتونید تعیین کنید که تصویر پس زمینه ای که برای Background در نظر گرفتید ، تکرار شدنی باشه یا یک بار نمایش داده بشه .  مثال :

background-repeat:no-repeat تکرار نشدنی باشه .

background-repeat:repeat تکرار شدنی باشه .

background-repeat:repeat-x تکرار شدنی در عرض باشه .

background-repeat:repeat-y تکرار شدنی در ارتفاع باشه .

 background-origin : این خاصیت در CSS3 وارد دنیای وب شد . این خاصیت تصویر پس زمینه رو با توجه به مقداری که براش تعیین می کنید در صفحه قرار میده . مثال :

background-origin:border-box  نسبت به border و حاشیه ی صفحه یا باکس تصویر رو قرار میده .

background-origin:content-box  نسبت به محتوای صفحه تصویر رو لحاظ می کنه .

background-origin:padding-box  نسبت به padding صفحه تصویر رو قرار میده .

background-origin:initial  بصورت عادی تصویر رو قرار میده ، با توجه به تنظیمات پیشفرض .

background-origin:inherit  با توجه به خاصیت والد ، تصویر رو تنظیم می کنه .

این خاصیت در مرورگرهای IE9+, Firefox, Opera, Chrome, Safari پشتیبانی میشه .

 background-clip : این خاصیت در CSS3 وارد دنیای وب شد . این خاصیت هم مثل خاصیت origin هست با این تفاوت که از این خاصیت برای رنگ پس زمینه استفاده می شه نه تصویر زمینه .

 این خاصیت در مرورگرهای IE9+, Firefox, Opera, Chrome, Safari پشتیبانی میشه .

background-attachment : با استفاده از این خاصیت میتونید مکان قرار گیری تصویر زمینه رو مشخص کنید . مثال :

background-attachment:scroll  این مقدار ، مقدار پیشفرض این خاصیت هست که تصویر پس زمینه رو بصورت عادی نمایش میده.

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

background-attachment:local  این مقدار هم تصویر رو بصورت عادی نمایش میده .

background-attachment:initial  با توجه به مقدار والد ، تصویر پس زمینه رو نمایش میده ، اگر والد این عنصر مقدار fixed داشته باشه ، این عنصر هم  بصورت fixed نمایش داده میشه .

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

 

 خلاصه نویسی برای خاصیت  Background

تمامی خاصیت های Background رو براتون توضیح دادم ، در صورتی که بخواین بصورت خلاصه نویسی از این خاصیت استفاده کنید ، میتونید از دستور زیر پیروی کنید : (پیشنهاد ما برای استانداردسازی کدهاتون خلاصه نویسی هست)

background: color position size repeat origin clip attachment image| initial | inherit;

مثال کاربردی :

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

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۴

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

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