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

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

دسته بندی موضوعات
سفارش تبلیغات

Background در Css

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;

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

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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • ROOHI AZGHANDI

    عالیه

  • علی حاجیلویی

    با سلام
    خسته نباشید
    چطور میتونیم تصویر پس زمینه رو توی تمامی رزولوشن ها به درستی و کامل نمایش بدیم؟

    • میترا رحیمی

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

  • مهیار

    واقعا دستتو درد نکنه
    خدا خیرتون بده .

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟