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

8 / 10 از 33 کاربر

Background

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

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

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
  • background-color : این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم : 
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;}

مرتضی : قشگ
14 7
قشنگ بود.
سارا : رنگ زمینه
8 2
سلام من یه کد باکس طراحی کردم <.textarea name="s1" rows="20" cols="20".> کد مورد نظرو اینجا قرار بده (همون كدآیكونات ) <./textarea.> به این شکل حالا اگر بخوام تصویر زمینه داخل این باکس بدم یا رنگ زمینش نثلا ابی شه باید چیکا کنم؟// ممنون میشم راهنماییم کنید
مدیریت : پاسخ
9 2
در بخش آموزش سی اس اس و خواص رنگ زمینه این موضوع با ذکر مثال توضیح داده شد.
رضوان : سوال
9 4
سلام توضیحات شما بسیار جامع و مفید می باشد اما برای من سوالی پیش آمده زمانی که این کد را در یک فایل با پسوند سی اس اس ذخیره میکنیم آیا نباید برای عمل کردن این کد و نمایش تصویر در پس زمینه یک تکه کد نیز در سند اچ تی ام ال خود بنویسیم؟لطفا اگر امکان دارد علاوه بر کد سی اس اس کدی را که باید در سند اچ تی ام ال هم نوشت قرار دهید متشکر میشوم اگر آن را به آدرس ایمیلم بفرستید. البته منظور من این نیست که تنها با کدهای اچ تی ام ال تصویر را در پس زمینه قرار دهیم منظور من با استفاده از کد های سی اس اس است که به یک تکه کد برای ارتباط در اچ تی ام ال هم نیاز دارند
مدیریت : پاسخ
18 2
ابتدا کلاس تغییر پس زمینه در فایل سی اس اس نوشته می شود. سپس فایل css در سند اچ تی ام ال فراخوانی و در نهایت در تگ مورد نظر ، در خاصیت class آن ، نام کلاس نوشته شده در فایل سی اس اس نسبت داده میشود.
ح :
11 4
عالی
تارا :
11 5
ممنون از زحمات شما
باران :
6 6
مفید بود ممنون.
امیر : تکرار زمینه
3 2
با سلام. من یه عکس دارم که میخوام با دستور ریپیت در کل صفحه تکرار بشه. ولی با دستورات بالا فقط در یک ستون و یا یک ردیف تکرا میشه و کل صفحه رو پر نمیکنه. باید چیکارکنم؟
امیر : تکرار زمینه
3 2
مشلم حل شد. باید از دستور reapeat به تنهایی استفاده میکردم بدون x و y
بهرام :
2 2
ممنون بابت اموزش مطلب مفیدی بود
بهرام111 : مشکل در نمایش عکس پس زمینه در مرورگر
2 2
با کدی که برای قرار دادن پس زمینه گفتین در قسمت Design عکس رو نشون میده اما در مرورگر نشون نمیده .چکار کنم ؟؟؟؟
مدیریت : پاسخ
3 2
آدرس دهی غلط است
لیلی :
2 2
سلام توضیحات عااااااااااااااااالللللللللللللییییی بود ممنون
عنوان نظر :
نام شما :
ایمیل :
تلفن تماس :
*