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


نویسنده:
سه شنبه ۲۳ اردیبهشت ۱۳۹۹
ویژگی 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 و … در جلسه‌ای جداگانه صحبت می‌کنیم.

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

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

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

ویژگی background-image در CSS

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

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

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

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

ویژگی background-repeat در CSS

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

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

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

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

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


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

ویژگی background-position در CSS

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

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

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

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


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

ویژگی background-attachment در CSS

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

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

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



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

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

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

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

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

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

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *