بخش دوم اموزش:

در این بخش با صفت background  و انواع مقادیر ان آشنا می شوید مانند :

background-color

background-image

background-attachment

background-repeat

background-position

پس زمینه(Backgraund)

Background-attachment = مشخص می کند که تصویر چه حالتی داشته باشد.

ثابت fixedیا اسکرول scrolls

Background-colors= برای رنگ پس زمینه عناصر به کار میرود:

مقادیری که میپذیرد:

Rgb(255,0,0)

#2f2f2f

Red

transparent

Background-image=یک تصویر را برای پس زمینه مشخص میکند:

مقادیر

url=آدرس تصویر مورد نظر.

None

Background-position=موقعیت تصویر زمینه را مشخص میکند

مقادیر:

Top left

Top center

Top right

Center left

Center center

Center right

Bottom left

Bottom center

Bottom right

X% y% = 0% 0% تصویر در بالا سمت چپ و 100% 100%پایین سمت راست واگر هم فقط از یک مختصات استفاده شود دیگری به صورت پیش فرض 50% است.

x-pos y-pos

background-repeat= برای چگونگی تکرارشدن تصویر:

repeat=به صورت افقی و عمودی تکرار می شود

repeat-x= به صورت افقی تکرار می شود

repeat-y= به صورت عمودی تکرار میشود

no-repeat

مثال:

Body

{

Background:#2f2f2f;

}

Body

{

Background: url(/img/bg.jpg) no-repeat top;

}

Body

{

Background: #2f2f2f url(/img/bg.jpg) no-repeat fixed top;

}

Background-attachment

Body

{

Background-image: url(/img/bg.jpg);

Background-attachment:scroll;

}

Background-color

Body

{

Background-color:#2f2f2f; /* rgb(124,245,132) or “red”*/

}

برای اضافه کردن توضیحات هم از */ در ابتدا و انتهای خط مورد نظر استفاده کنید.

شما هنگامی که از صفت background-colorاستفاده می کنید نمی توانید از background-imageاستفاده کنید.

Body

{

Background-image: url(bg.jpg) ;

}

Body

{

Background-image: url(bg.jpg) ;/*انتخاب تصویر برای زمینه*/

Background-repeat:no-repeat;/*عدم تکرار */

Background-position:top left; /*موقعیت تصویر با لا چپ*/

}

صفت Background-positionفقط با صفت Background-image کاربرد دارد.

پایان بخش دوم