خانه دوره‌های رایگان آموزش رایگان HTML و CSS کار با ویژگی background در CSS | استایل پس زمینه

کار با ویژگی background در CSS | استایل پس زمینه

دسته‌ها: آموزش رایگان HTML و CSS، دوره‌های رایگان

سه شنبه 23 اردیبهشت 1399

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

در این درس مجموعه ویژگی‌های backgrounds را یاد خواهید گرفت:

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

ویژگی background-color در CSS

برای تعیین رنگ پس‌زمینه برای یک عنصر می‌توان از ویژگی background-color استفاده کرد. مقدار این ویژگی می‌تواند نام رنگ، کد رنگ یا مقادیر rgb و … باید.

توجه: درمورد کد رنگ، سیستم‌های rgb و … در جلسه‌ای جداگانه صحبت می‌کنیم.

<p style="background-color: green;">من یک پاراگراف با پس زمینه سبز هستم</p>

1	<p style="background-color: green;">من یک پاراگراف با پس زمینه سبز هستم</p>

خروجی کد بالا:

من یک پاراگراف با پس زمینه سبز هستم

به همین راحتی می‌توان برای هر عنصری یک رنگ پس‌زمینه تنظیم کرد.

ویژگی background-image در CSS

با استفاده از ویژگی background-image می‌توان یک تصویر را برای پس زمینه عناصر HTML تنظیم کرد.

<p style="background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');">من یک پاراگراف با پس زمینه تصویر هستم</p>

1	<p style="background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');">من یک پاراگراف با پس زمینه تصویر هستم</p>

خروجی کد بالا:

من یک پاراگراف با پس زمینه تصویر هستم

همانطور که می‌بینید تصویر گل در پس زمینه عنصر p موردنظر نمایش داده شده است. ابعاد این تصویر 80*80 پیکسل است.

ویژگی background-repeat در CSS

همانطور که می‌بینید تصویر فوق همانند موزاییک در کنار هم تکرار شده. برای کنترل روی تکرار تصویر می‌توان از ویژگی background-repeat استفاده کرد. به مثال زیر دقت کنید:

توجه: در مثال زیر از روش internal برای درج دستورات CSS استفاده شده است.

<head>
	<title>Document</title>
	<style>
		p {
			background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');
			background-repeat: no-repeat;
		}
	</style>
</head>
<body>
	
	<p>یک پاراگراف با تصویر پس زمینه بدون تکرار</p>

</body>

<head>

<title>Document</title>

<style>

p {

background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');

background-repeat: no-repeat;

}

</style>

</head>

<body>

<p>یک پاراگراف با تصویر پس زمینه بدون تکرار</p>

</body>

نکته: برای کوتاه کردن مثال، در کد بالا از نوشتن تگ‌های DOCTYPE و html صرف نظر شده.

خروجی کد بالا:

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

این ویژگی می‌تواند مقادیر repeat-x و repeat-y را هم به خود بگیرد، که به ترتیب یعنی تکرار در محور X (چپ و راست) و تکرار در محور Y (بالا و پایین).

ویژگی background-position در CSS

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

این ویژگی می‌تواند دو پارامتر را به عنوان مقدار دریافت کند. پارامتر اول مربوط به محور X (چپ و راست) و پارامتر دوم مربوط به محور Y (بالا و پایین) است. به مثال زیر دقت کنید:

<head>
	<title>Page title</title>
	<style>
		p {
			background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');
			background-repeat: no-repeat;
			background-position: right top;
		}
	</style>
</head>
<body>
	
	<p>من یک پاراگراف با تصویر پس زمینه هستم</p>

</body>

<head>

<title>Page title</title>

<style>

p {

background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');

background-repeat: no-repeat;

background-position: right top;

}

</style>

</head>

<body>

<p>من یک پاراگراف با تصویر پس زمینه هستم</p>

</body>

خروجی کد بالا:

من یک پاراگراف با تصویر پس زمینه هستم

در مثال بالا برای پارامتر اول right و برای پارامتر دوم top را تنظیم کرده‌ایم. با توجه به این مقادیر تصویر در گوشه‌ی بالا و سمت راست عنصر نمایش داده می‌شود.

ویژگی background-attachment در CSS

با استفاده از ویژگی background-attachment می‌توان تصویر پس زمینه را نسبت به اسکرول صفحه ثابت (fix) کرد. بصورت پیشفرض مقدار این ویژگی روی scroll تنظیم شده، برای ثابت کردن پس‌زمینه می‌توان از مقدار fixed برای این ویژگی استفاده کرد.

<head>
	<title>Page title</title>
	<style>
		p {
			background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');
			background-attachment: fixed;
		}
	</style>
</head>
<body>
	
	<p>من یک پاراگراف با تصویر پس زمینه هستم</p>

</body>

<head>

<title>Page title</title>

<style>

p {

background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');

background-attachment: fixed;

}

</style>

</head>

<body>

<p>من یک پاراگراف با تصویر پس زمینه هستم</p>

</body>

خروجی کد بالا:

من یک پاراگراف با تصویر پس زمینه ثابت هستم

نسخه کوتاه – ویژگی background

ویژگی background نسخه کوتاه شده تمام ویژگی‌های بالاست. یعنی می‌توان بجای نوشتن چند ویژگی تنها از background استفاده کرد.

Syntax نحوه مقدار دهی به ویژگی background:

background: bg-color  bg-image  bg-repeat  position;

1	background: bg-color bg-image bg-repeat position;

به مثال زیر دقت کنید:

<p style="background: pink url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg') no-repeat top right;">من یک پاراگراف با تصویر پس زمینه هستم</p>

1	<p style="background: pink url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg') no-repeat top right;">من یک پاراگراف با تصویر پس زمینه هستم</p>

خروجی کد بالا:

من یک پاراگراف با تصویر پس زمینه هستم

تگ table در HTML | ایجاد جدول در صفحات وب درس قبلی

رنگ‌ها در CSS | معرفی کد HEX، سیستم RGB و HSL درس بعدی

17 پاسخ به “کار با ویژگی background در CSS | استایل پس زمینه”

mrms گفت:
۱ اردیبهشت ۱۴۰۲ در ۱۱:۳۶ ب٫ظ
سلام علیکم.
ببخشید من میخواستم یه کاری کنم که بدون اینکه متن رو بیشتر کنم بک گراند پشت متن رو بزرگ تر کنم.(البته نمیخوام بک گراند کل سایت رو تعیین کنم ها!)
راستش تنها راهی که پیدا کردم استفاده از بود که خیلی حوصله سربره و باید چند دقیقه اینو هی تایپ کرد.
ممنون میشم کمک کنید(:
- علی سلطانی گفت:
  ۳ اردیبهشت ۱۴۰۲ در ۸:۲۹ ب٫ظ
  سلام
  می‌تونید از ویژگی های height و یا min-height استفاده کنید
محمد رضا گفت:
۱۲ مرداد ۱۴۰۱ در ۲:۳۳ ب٫ظ
برای ویژگی background-image برای تست چجوری آدرس عکس رو بدم برای تمرین
- علی سلطانی گفت:
  ۱۲ مرداد ۱۴۰۱ در ۵:۰۳ ب٫ظ
  سلام وقت بخیر
  لطفا درس مربوط به آدرس دهی فایل‌هارو ببینید.
Sama گفت:
۱۹ مرداد ۱۴۰۰ در ۷:۴۵ ق٫ظ
سلام
ممنون از پاسخ گویی تون ..اشکال کار رو پیدا کردم
حالا یه سوال : وقتی یه عکس رو به عنوان بک گراند به body میدیم .اون عکس فضای پس زمینه تگa،em,,b,i را پر می کنه ولی تگ p این خاصیت را ندارهد
یعنی اطراف نوشته هام در تگ p یه پس زمینه سفید قرار میگیره
چطور میشه تصویر را به صورت یکنواخت در کل صفحه قرار داد ؟
سپاسگزارم
- مریم جعفرپور گفت:
  ۱۹ مرداد ۱۴۰۰ در ۱۱:۵۳ ق٫ظ
  سلام اگر می‌خواین به کل صفحه وب یک پس زمینه تصویر بدید با بک‌گراند را برای تگ body در نظر بگیرید و به تگ body یک width:100% هم بدید
Sama گفت:
۱۸ مرداد ۱۴۰۰ در ۷:۵۹ ق٫ظ
سلام
عکس من کنار فایل htmlهست و به این شکل توی تگ style آدرس دادم ولی عکسی نمی یاد ??
P{background-image:url(‘untitled-6.jpg’);}
- علی سلطانی گفت:
  ۱۸ مرداد ۱۴۰۰ در ۹:۳۹ ق٫ظ
  سلام دوست عزیز
  کدی که نوشتید درسته. احتمالا نام یا پسوند تصویر رو درست ننوشتید یا اینکه فایل تصویر شما دقیقا در کنار فایل html نیست.
samereh گفت:
۲ اردیبهشت ۱۴۰۰ در ۱۱:۳۳ ب٫ظ
سلام من فایل عکس رو در کنار فایل htmlدارم چطور میتونم ادرس بدم که پس زمینه متن از عکسهای داخل فایلم باشه.امتحان کردم از طریق srcکه نمیپذیرفت.ممنون میشم راهنمایی کنید
- مریم جعفرپور گفت:
  ۳ اردیبهشت ۱۴۰۰ در ۱۰:۱۴ ق٫ظ
  سلام لطفا به کدهای نوشته شده توجه کنید. برای بک گراند از تگ img‌ استفاده نمیشه باید با css این مسیردهی رو انجام بدید. در css هم باید آدرس دهی رو بر اساس موقعیت عکس نسبت به css انجام بدید. اگر در کنارهم هستن فقط اسم تصویر رو درج کنید.
حسین گفت:
۱۴ بهمن ۱۳۹۹ در ۵:۴۱ ب٫ظ
سلام خسته نباشید . چجوری میشه بک گراند رو به اندازه ی کل صفحه تنظیم کرد ؟
- مریم جعفرپور گفت:
  ۱۵ بهمن ۱۳۹۹ در ۱۱:۰۵ ق٫ظ
  اگر منظورتون اندازه فقط یه صفحه هستش میتونید به یک عنصر height مناسب بدید و به اون بک گراند بدید. اگر میخواین برای کل سایت تنظیم شه به body بدید.
مهدی گفت:
۱۴ بهمن ۱۳۹۹ در ۵:۱۷ ب٫ظ
سلام اگر بخوایم کل صفحه رو بکگراند بزاریم باید چه کار کنیم؟
- مریم جعفرپور گفت:
  ۱۵ بهمن ۱۳۹۹ در ۱۱:۰۴ ق٫ظ
  اگه بخواین به کل صفحه بک گراند بدید باید از تگ‌های کلی که در بر گیرنده‌ی کل عناصره استفاده کنید. مثل تگ body به این عنصر بک گراند بدید.
mmohsenn77 گفت:
۱۰ آذر ۱۳۹۹ در ۱۱:۲۰ ب٫ظ
سلام و عرض ادب
اگه عکس بکگراند رو بخام از تو کامپیوتر خودم انتخاب کنم، چه آدرسی باید بدم؟؟؟؟؟
- مریم جعفرپور گفت:
  ۱۱ آذر ۱۳۹۹ در ۱۱:۱۴ ق٫ظ
  سلام با css‌ این امکان نیست باید تصویر رو در فایل پروژه قرار بدید.
- علیرضا گفت:
  ۲ اردیبهشت ۱۴۰۰ در ۱:۵۴ ق٫ظ
  سلام این امکان در برنامه Adobe Dreamweave وجود داره پیشنهاد میکنم برای طراحی سایت از این برنامه استفاده کنید

دیدگاهتان را بنویسید لغو پاسخ

You must be logged in to post a comment.