Background ها در CSS

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


انواع background

انواع background در CSS عبارت اند از :

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

 صفت background-color

صفت background-color رنگ پشت زمینه ی یک عنصر را مشخص میکند. رنگ background یک عنصر به صورت زیر تنظیم میشود :

body {
    background-color: lightblue;
}
خودتان امتحان کنید

در CSS ، یک رنگ اغلب به شکل های زیر مشخص میشود :

  • یک نام معتبر برای یک رنگ - مانند "red"
  • یک مقدار هگزادسیمال - مانند "ff0000#"
  • یک مقدار RGB - مانند "(rgb(255,0,0"

در مثال زیر ، عناصر <p> ، <h1> و <div> هرکدام رنگ background متفاوتی دارند :

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
خودتان امتحان کنید

صفت background-image

صفت background-image یک تصویر را به عنوان تصویر پشت زمینه ی یک عنصر مشخص میکند. به صورت پیشفرض، تصویر آنقدر تکرار خواهد شد تا فضای کل عنصر را پوشش دهد.

صفت background-image برای یک صفحه به صورت زیر تنظیم میشود :

body {
    background-image: url("paper.gif");
}
خودتان امتحان کنید

نکته : در تابع ()url آدرس اینترنتی تصویر قرار میگیرد. در مثال بالا فقط از نام تصویر به عنوان پارامتر برای این تابع استفاده شده است که اشاره به نسبی بودن آدرس تصویر دارد.

در نمونه مثال یک نمونه بد از ترکیب متن و تصویر پشت زمینه آورده شده است. در این مثال متن به سختی قابل خواندن است :

body {
    background-image: url("bgdesert.jpg");
}
خودتان امتحان کنید

 به یاد داشته باشید که هنگام استفاده از صفت background-image از تصاویری استفاده کنید که به خوانایی متن آسیب نزند.


Background Image - تکرار به صورت افقی و عمودی

به صورت پیشفرض صفت background-image یک تصویر را هم به صورت افقی و هم به صورت عمودی تکرار میکند. بعضی از تصاویر نیاز است تنها به صورت افقی و یا به صورت عمودی تکرار شوند در غیر این صورت نتیجه جالب نخواهد بود :

body {
    background-image: url("gradient_bg.png");
}
خودتان امتحان کنید

اگر تصویر بالا تنها به صورت افقی تکرار شود ( ;background-repeat: repeat-x ) ، تصویر background بهتر به نظر خواهد رسید :

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
خودتان امتحان کنید

نکته : برای تکرار تصویر به صورت عمودی از مقدار (;background-repeat: repeat-y ) استفاده کنید.


Background Image - تنظیم صفات position و no-repeat

نمایش تصویر background تنها یک بار و بدون تکرار در جهات افقی و عمودی، توسط صفت background-repeat انجام میپذیرد :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
خودتان امتحان کنید

در مثال ذکر شده در بالا تصویر background در همان مکانی که متن نمایش داده میشود قرار میگیرد. ما میخواهیم مکان تصویر را تغییر دهیم تا به خوانایی متن آسیبی وارد نشود.

مکان یک تصویر توسط صفت background-position تعیین میشود. در نمونه مثال زیر مکان تصویر سمت راست و بالا در نظر گرفته شده است :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
خودتان امتحان کنید

Background Image - مکان ثابت برای تصویر

برای اینکه تصویر background ثابت بماند و با ادامه ی صفحه اسکرول نخورد از صفت background-attachment استفاده میشود.

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

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
خودتان امتحان کنید

Background - صفت کوتاه شده

برای کوتاه نویسی در کد، این امکان وجود دارد که تمام صفات background را در یک صفت گنجاند که به این صفت ، صفت shorthand (کوتاه شده) میگویند. نمونه مثال زیر نحوه ی استفاده از صفت کوتاه شده برای صفات background را نشان میدهد :

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
خودتان امتحان کنید

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

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

میتوان از هرکدام از مقادیر صفات در صفت کوتاه شده ی background چشم پوشی کرد مادامی که اولویت در بقیه مقادیر همچنان حفظ شده باشد.

منتشر شده در ۹ تیر ۱۳۹۶ حمید رضا ملکی ۸۰۲ بازدید
دیدگاه ها
علی یکشنبه ۹ اردیبهشت ۱۳۹۷

سلام . الان در این صفحه ای که قرار داریم ، بک گراند لینکش در سایدبار سبز شده و نوشته هاش سفید . واسه این کار از چه کدی در html و css استفاده کردین؟

مدیر سایت چهار شنبه ۱۲ اردیبهشت ۱۳۹۷

سلام. کافیه مقدار خاصیت background-color لینک مربوطه را در css برابر با رنگ سبز قرار دهید. برای رنگ متن نیز خاصیت color لینک مورد نظر را سفید مقدار دهی کنید.

a.active {
    background-color: #4CAF50;
    color: #ffffff;
}