Home / آموزش / جلسه هشتم از آموزش css تنظیم پس زمینه Background

جلسه هشتم از آموزش css تنظیم پس زمینه Background

جلسه هشتم از آموزش css تنظیم پس زمینه Background

css
جلسه هشتم از آموزش css تنظیم پس زمینه Background

سلام خدمت شما عزیزان و همراهان همیشگی سون پلاگین

تا جلسه هفتم دوست عزیزمون جناب آقا رضا در خدمتتون بودن از این جلسه به بعد خودم (وحید باقری) در خدمتتون با آموزش css خوب همه عزیزانی که درس های قبل رو اگه دنبال کرده باشید حتما متوجه شدید که کاربرد css  در طراحی چی هست ؟ css  از نظر بنده مانند شاخ و برگ برای درخت هست.

خوب از قضیه زیاد دور نشیم امروز قرار هستش در مورد ایجاد رنگ برای پس زمینه توضیحاتی خدمتتون بدیم

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

 

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

 

لینک کوتاه مطلب : http://7plugin.ir/?p=954

درباره وحید باقری

وحید باقری علاقمند به توسعه وردپرس و ارائه آموزش های مفید برای شما عزیزان هستم و تا جایی هم که از دستم بر بیاد برای کمک کردن و مشاوره دادن به شما سروران گرامی دریغ نمی کنم

ببینید حتما

نمایش آمار بازدید مطلب با استفاده از کد و بدون افزونه

نمایش آمار بازدید مطلب با استفاده از کد و بدون افزونه سلام خدمت شما دوست …

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

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

سوال امنیتی * لطفا معادله امنیتی را مجددا بارگذاری کنید