عنوان این جلسه : کار با ویژگی background در CSS | استایل پس زمینه
به یکی دیگر از جلسات دوره آموزش رایگان 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>
به همین راحتی می‌توان برای هر عنصری یک رنگ پس‌زمینه تنظیم کرد.
ویژگی background-image در CSS
با استفاده از ویژگی background-image می‌توان یک تصویر را برای پس زمینه عناصر HTML تنظیم کرد.
<p style="background-image: url('https://adminesite.com/wp-cont....ent/uploads/2020/05/ یک پاراگراف با پس زمینه تصویر هستم</p>
همانطور که می‌بینید تصویر گل در پس زمینه عنصر p موردنظر نمایش داده شده است. ابعاد این تصویر 80*80 پیکسل است.
ویژگی background-repeat در CSS
همانطور که می‌بینید تصویر فوق همانند موزاییک در کنار هم تکرار شده. برای کنترل روی تکرار تصویر می‌توان از ویژگی background-repeat استفاده کرد. به مثال زیر دقت کنید:
توجه: در مثال زیر از روش internal برای درج دستورات CSS استفاده شده است.
<head>
<title>Document</title>
<style>
p {
background-image: url('https://adminesite.com/wp-cont....ent/uploads/2020/05/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>یک پاراگراف با تصویر پس زمینه بدون تکرار</p>
</body>
نکته: برای کوتاه کردن مثال، در کد بالا از نوشتن تگ‌های DOCTYPE و html صرف نظر شده.
این ویژگی می‌تواند مقادیر repeat-x و repeat-y را هم به خود بگیرد، که به ترتیب یعنی تکرار در محور X (چپ و راست) و تکرار در محور Y (بالا و پایین).
