شما اینجا هستید

ویژگی background در css برای تعریف پس زمینه عناصر استفاده میگردد.

رنگ پس زمینه

ویژگی background-color رنگ پس زمینه یک عنصر را مشخص میکند.

تنظیم رنگ پس زمینه برای صفحه به شکل زیر است :

body {
    background-color: #b0c4de;
}

بیشتر وقتها، رنگ توسط css به روشهای پایین مشخص میگردد :

  • مقدار HEX مانند 0000ff#
  • مقدار RGB مانند rgb(0,0,255)
  • نام رنگ مانند blue

در مثال زیر عناصر <h1>, <p> و <div> رنگهای پس زمینه متفاوتی از هم دارند.

<html>

<head>

<style>

h1 {

    background-color: #6495ed;

}


p {

    background-color: #e0ffff;

}


div {

    background-color: #b0c4de;

}

</style>

</head>

<body>


<h1>مثالی از پس زمینه ها در سی اس اس</h1>

<div>

این یک متن درون عنصر div است.

<p>این پاراگراف رنگ پس زمینه مربوط به خودش را دارد</p>

همچنان درون عنصر div هستیم.

</div>


</body>

</html>

 

تصویر پس زمینه

 

ویژگی background-image یک تصویر برای استفاده در پس زمینه یک عنصر مشخص میکند. تصویر به صورت پیشفرض تا پر کردن محدوده عنصر تکرار میشود یعنی اگر یک تصویر کوچک برای پس زمینه یک عنصر مانند body در نظر گرفته باشیم تصویر در جهات عمودی و افقی تکرار شده تا همه جای عنصر را در بر بگیرد.

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

body {
    background-image: url("paper.gif");
}

تصویر پس زمینه – تکرار به صورت عمودی یا افقی

ویژگی background-image بصورت پیشفرض در هر دو جهت تصویر را تکرار میکند. برخی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند مانند ساختن بک گراند برای یک منو. به طور کلی برخی تصاویر اگر در دو جهت تکرار شوند ظاهر زشتی پیدا میکنند چون برای یک جهت خاص طراحی شده اند.

برای تکرار تصویر در جهت افقی از ویژگی background-repeat و مقدار repeat-x استفاده کنید:

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

برای تکرار تصویر در جهت عمودی از ویژگی background-repeat و مقدار repeat-y استفاده کنید.

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

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

 

در مثال بالا چون تصویر تکرار نشده تصویر در گوشه بالای صفحه به نمایش داده میشه. اگر بخواهیم مکان نمایش تصویر را تغییر دهیم از ویژگی background-position استفاده میکنیم.

 

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

تند نویسی ویژگی background

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

خلاصه نویسی میتونه سرعت ما را در کد زدن افزایش بده.

برای نوشتن کدهای کوتاه این امکان وجود دارد که همه ویژگیها را در یک ویژگی تعریف کنیم. البته باید این ویژگیها در رابطه با یک ویژگی باشند.

برای تند نویسی ویژگیهای مربوط به پس زمینه از ویژگی background استفاده میکنیم:

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

هنگام استفاده از خلاصه نویسی پس زمینه ترتیب ویژگیها به صورت زیر میباشند:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

حتی ننوشتن برخی از این ویژگیها مهم نیست و با ننوشتن آنها باز هم پس زمینه ای که مشخص کرده ایم نمایش داده میشود.

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.