آموزش کار با پس زمینه BACKGROUNDدر CSS

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح

در آموزش حاضر قصد داریم نحوه کار با پس زمینه یا BACKGROUND را در CSS به شما عزیزان آموزش دهیم. شما می توانید در پشت المان های موجود در صفحه وب سایت از رنگ ها، و یا تصاویر دلخواه خودتان برای جذاب تر کردن صفحه، جلب توجه مخاطبان ، شکیل تر شدن وب سایت و سایر موارد دیگر استفاده کنید.

انواع پس زمینه در CSS

در CSSانواع مختلفی از پس زمینه ها در دسترس هستند که می توانید از آنها در پشت عناصر خود روی صفحه استفاده کنید:

• background-color                      رنگ پس زمینه
• background-image                    تصویر پس زمینه
• background-repeat                   پس زمینه تکرار شونده
• background-attachment            تعیین ثابت بودن پس زمینه یا تغییر مکان آن همراه با پیمایش صفحه
• background-position                 تعیین مکان قرار گرفتن پس زمینه

در ادامه هر یک از موارد را خدمت شما عزیزان شرح می دهیم.

background-color 

همان طور که از عنوان این بخش مشخص است، شما می توانید با استفاده از این خاصیت css ، رنگ پس زمینه را تغییر داده و رنگ دلخواه خود را جایگزین کنید. کافیست کد زیر را با رنگ مورد نظرتان در بخش کدهای cssقرار دهید:

[php]
body {
background-color: #b0c4de;
}
[/php]
نکته: با توجه به دستور bodyدر این کد ، این قطعه کد ، رنگ پس زمینه صفحه را تغییر می دهد.

در آموزش قبل با نحوه ی مقدار دهی رنگ ها در css آشنا شده ایم. مقدار دهی به رنگ ها معمولا به سه روش زیر انجام می شود.

(برای اطلاعات بیشتر و دانستن تمامی کد رنگ ها در تمام روش ها و نام رنگ ها اینجا کلیک کنید.)

HEX مثل “FF0000#”

RGB مثل “(rgb(255,0,0”

COLOR NAME مثل “green”

و در مثال زیر با نحوه مقدار دهی به عناصر مختلف از طریق css آشنا می شوید.

تغییر رنگ پس زمینه یک سر تیتر
[php]
h1 {
background-color: #6495ed;
}
[/php]

تغییر رنگ پس زمینه یک پاراگراف

[php]
p {
background-color: #e0ffff;
}
[/php]

تغییر رنگ پس زمینه بخش تعیین شده توسط برنامه نویس
[php]
div {
background-color: #b0c4de;
}
[/php]

background-image

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

کد انتصاب عکس برای تغییر پس زمینه کل صفحه

[php]

body {
background-image: url(“paper.gif”);
}
[/php]
نکته: در این کد ، paper.gif نام تصویری است که در پس زمینه قرار می گیرد. شما باید در این قسمت نام تصویر مد نظر خودتان را وارد کنید.

background-repeat

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

کد تکرار تصویر در جهت افقی

[php]
body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}
[/php]

نکته: در این کد img_tree اسم تصویر و png پسوند فایل  می باشد.

کد تکرار تصویر در جهت عمودی

[php]
body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-y;
}
[/php]

کد تکرار نشدن تصویر

[php]
body {
background-image: url(“gradient_bg.png”);
background-repeat: no-repeat;
}
[/php]

background-attachment

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

نکته: تصویر به صورت پیش فرض، در مرورگرها ثابت نیست و برای ثابت کردن آن باید کد زیر را در بخش کدهای css وارد کنید.

[php]
body {
background-image: url(‘gradient_bg.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
}
[/php]

برای متحرک کردن تصویر در هنگام پیمایش صفحه نیز از کد زیر استفاده می کنیم:

[php]
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
[/php]

background-position

با این خاصیت نیز می تواند محل قرار گرفتن تصویر را با ذکر مختصات آن مشخص کنید.

برای مثال قصد داریم تصویر در قسمت بالای صفحه و در سمت چپ باشد. برای این منظور از کد زیر استفاده می کنیم:

[php]
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}
[/php]

نکته: در این کد مشخص کرده ایم که تصویر تکرار نشود و در گوشه سمت چپ و بالای صفحه قرار بگیرد.

میخواهم بیشتر بدانم.