تنظیم پس زمینه در CSS

تنظیم Background در CSS

تنظیم پس زمینه در CSS

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

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

  1. background-color

  2. background-image

  3. background-repeat

  4. background-attachment

  5. background-position

تعریف پس زمینه در css

  • background-color : این خاصیت رنگ پس زمینه در CSS یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

{;body {background-color:#b0c4de

  • background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر  پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

        {;(‘body {background-image:url(‘paper.gif

  • background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی  تکرار شود  زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعث کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :

} body

;(‘background-image:url(‘gradient2.png
;background-repeat:repeat-x
{

زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :

body
}
;(‘background-image:url(‘img_tree.png
;background-repeat:no-repeat
}

  • background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.

body
}
;(‘background-image:url(‘smiley.gif
;background-repeat:no-repeat
;background-attachment:fixed
{

  • background-position : این خاصیت موقعیت  یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست –  بالا  از کد زیر استفاده میکنیم :

body
}
;(‘background-image:url(‘img_tree.png
;background-repeat:no-repeat
;background-position:top right

{

این سه خط را میتوان به صورت خلاصه تر نوشت :

{;body {background:#ffffff url(‘img_tree.png’) no-repeat right top

بازدیدها: 12

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

مطالب مرتبط

نظر بدهید

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