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

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

Payman Nosrati - ۳ سال قبل
با سلام، من برای login page یک تصویر رو به عنوان background ست کردمف اما در رابطه با سایز بندیش مشکل دارم، برای مثال حین می خوام اندازه تصویر همیشه حالت منطقی داشته باشه و با بزرگ و کوچیک کردن صفحه به هم نریزه، ممنون میشم راهنماییم کنین
حمید رضا ملکی - ۳ سال قبل

سلام. بهتره از مشخص background-size در css استفاه کنید.. میتونید بسته به نیازتون از مقادیر مختف اون استفاده کنید..

کاربر مهمان - ۴ سال قبل
با درود راستی خیلی عالی میشه که ویدئو بزارید تو سایت مطمئنا به معرفی سایت هم کمک خواهد کرد.
کاربر مهمان - ۴ سال قبل
با درود من این دو جور آدرس را دادم 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;
}

 

هدف لرن سورس

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

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

بخش های اصلی

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

راه های ارتباطی

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

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.