تنظیم پس زمینه Background

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

 ویژگی Background برای تعریف افکت های  پس زمینه برای یک عنصر به کار می رود. این ویژگی در طراحی وب سایت به شکیل تر شدن سایت شما کمک می کند.

حتما بخوانید: خواص مربوط به سرریزی Overflow عناصر

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

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

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;
}

1. 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;}

 

با دریافت « مشاوره برنامه‌نویسی، وب و سئو » از کارشناسان جوان حرفه‌ای و باتجربه ساکوراد؛ موفقیت کسب و کار، رونق فروش و افزایش درآمد خود را تضمین کنید!

و اما کلام آخر…

استفاده از ویژگی‌ های مختلف پس‌ زمینه در CSS به طراحان وب این امکان را می‌دهد که طراحی‌ های جذاب و کاربرپسندی ایجاد کنند. با ترکیب رنگ‌ها، تصاویر و گرادیانت‌ها، می‌توان جلوه‌ های بصری متنوعی را برای صفحات وب فراهم کرد.