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

حامد محمدیحامد محمدی
91 بازدید
آموش کار با پس زمینه background در css

پس زمینه ، رنگ یا تصویری است که در پشت المان موجود در صفحه قرار می گیرد. شما می توانید توسط CSS برای المان های موجود در صفحه وب سایت خودتان پس زمینه دلخواه خود را به صورت رنگ، یا تصویر دلخواه قرار دهید. از پس زمینه ها برای جلب توجه مخاطب، مهم جلوه دادن موضوع مورد نظر، رساندن پیامی دلخواه و مواردی از این دست استفاده می شود. در ادامه،  کار با پس زمینه 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]

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

 

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

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت