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 چشم پوشی کرد مادامی که اولویت در بقیه مقادیر همچنان حفظ شده باشد.

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

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

احمد ایرانپور یکشنبه ۲۸ مرداد ۱۳۹۷

با درود من این دو جور آدرس را دادم background-image: url("f:\ahmad.png"); background-image: ("f:\ahmad.png"); اما نتونست عکس را بیاره

حمید رضا ملکی سه شنبه ۳۰ مرداد ۱۳۹۷

سلام. آدرس باید نسبی باشد و اون هم نسبت به فایل html. همانطور که گفتم در آینده ای نه چندان دور در ویدئو های سایت این مشکلات حل خواهد شد.

احمد ایرانپور شنبه ۲۷ مرداد ۱۳۹۷

با درود چه طوری یه عکس از سیستم خودم را بکگراند کنم؟ یا چه طوری یه عکس را در صفحه آپلود کنم که بعدش بتونم به عنوان بکگراند استفاده کنم ازش؟

حمید رضا ملکی شنبه ۲۷ مرداد ۱۳۹۷

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

علی یکشنبه ۹ اردیبهشت ۱۳۹۷

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

حمید رضا ملکی چهار شنبه ۱۲ اردیبهشت ۱۳۹۷

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

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