عضویت در سایت

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

کد امنیتی برای بروزرسانی کد امنیتی روی تصویر کلیک کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1075 آموزش و 1875 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش css – قسمت پنجم(Backgrounds)

سلام

با پنجمین قسمت از آموزش Css در خدمتتون هستیم؛ در این قسمت خواهیم پرداخت به پس زمینه یا Background ها در css؛ در ادامه همراه بپرسم باشید.

آموزش:

Background(پس زمینه) یکی از خواص پرکابرد css می باشد که از این خاصیت برای تعریف افکت های پس زمینه ی عناصر HTML استفاده می کنیم، در واقع هنگامی که بخوایم برای پس زمینه صفحه یک تصویر یا بخوایم رنگی را برای یکی از عناصر در نظر بگیریم از این خاصیت استفاده میکنیم.

حال خاصیت Background دارای دارای ۵ ویژگی است، که این ۵ ویژگی عبارتند از:

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

که در ادامه به توضیح هر ویژگی می پردازیم.

  • background-color

از Background-color برای تغییر رنگ پس زمینه استفاده می شود.

مثال: رنگ پس زمینه یک صفحه HTML

کد بالا را برای تگ body خود در قسمت کدهای css قرار دهید و نتیجه را مشاهده کنید.

برای رنگ دهی به عناصر HTML توسط Css از شیوه های زیر می توانیم استفاده کنیم:

  1. به کار بردن نام رنگ، مثل blue
  2. نوشتن مقدار هگزادسیمال(HEX)، مثل ff0000
  3. نوشتن مقدار RGB، مثل RGB(255,0,0)

که در جلسه قبلی انواع شیوه های رنگ دهی را توضیح دادیم، برای مشاهده آموزش رنگ ها در Css کلیک کنید.

از ویژگی background-color می توانیم برای دیگر عناصر HTML نظیر تگ های p,h1 to h6,div و … استفاده کنیم.

برای هر عنصری که خواستید رنگ اعمال شود، کافیست برای تگ مورد نظر در قسمت css از ویژگی background-color استفاده کنید.

  • background-image

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

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

مثال: گذاشتن یک تصویر برای پس زمینه

در کد بالا یه جای beporsam_back.png نام و آدرس تصویر خود را قرار دهید.

مطلب پیشنهادی:  تگ های HTML – تگ summary

برای چگونگی آدرس دادن تصاویر، این آموزش را مطالعه نمایید.

 

  • background-repeat

به طور پیشفرض تصویر به هر دو صورت عمودی(verticall) و افقی(horizontall) تکرار می شود.

برای تغییر تکرار تصویر به صورت Vertical یا Horizontall به صورت زیر می بایست از ویژگی background-repeat در کنار background-image به صورت زیر استفاده کنید.

برای تکرار تصویر به صورت افقی از  background-repeat: repeat-x و برای تکرار به صورت عمودی از background-repeat: repeat-y استفده کنید.

  • Background Image – Set position and no-repeat

در صورتی که بخواهیم تصویر زمینه تکرار نشود از background-repaet به صورت زیر استفاده می کنیم:

با استفاده از background-repaet تصویر زمینه یک بار فقط نمایش داده می شود و تکرار تصویر زمینه غیر فعال می شود.

با background-position می توانیم محل قرار گیری تصویر را مشخص کنیم، در مثال زیر محل قرار گیری تصویر را مشخص کردیم:

در مثال بالا گفتیم تصویر را در سمت راست و بالا قرار بگیرد(right top) می توانیم به right top از left top,center top و … استفاده کنیم.

  • Background Image – Fixed position

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

برای درک بهتر ثابت بودن تصویر، کدهای زیر را در یک سند HTML ذخیره و نتجیه را مشاهده کنید.

در کد بالا به جای beporsam_back.png آدرس تصویر خود را جایگزین کنید.

  • تمامی خواص Background
مطلب پیشنهادی:  دور زدن حالت روح موبوگرام و پیام رسان های مشابه

ویژگی

توضیح

background

کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.

background-attachment

ثابت کردن تصویر هنگام اسکرول کردن صفحه

background-color

تنظیم رنگ پس زمینه

background-image

تنظیم تصویر پس زمینه

background-position

محل قرار گیری تصویر

background-repeat

چگونگی تکرار پس زمینه

 

آموزش این بخش نیز به پایان رسید، امیدوارم مفید بوده باشه:)

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

موفق باشید.

درباره احمد آخوندیمدیر سایت

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

دنبال کردن

ارسال نظر

رفتن به بالا

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

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

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