جلسه 8 آموزش CSS: کار با پس زمینه ها (Backgrounds) در CSS

جلسه 8 آموزش CSS: کار با پس زمینه ها (Backgrounds) در CSS

سلام رفیق عزیز خودم! 👋 به جلسه هشتم آموزش CSS رایا وردپرس خوش اومدی.

امروز می‌ریم سراغ یکی از جذاب‌ترین و پرکاربردترین بخش‌های CSS توی طراحی سایت: کار با پس‌زمینه‌ها! ✨ می‌دونی که پس‌زمینه چقدر مهمه؟ 🤔 چون یکی از اولین چیزاییه که چشم کاربر بهش می‌افته و حسابی روی ظاهر و حس و حال کلی سایتت تاثیر می‌ذاره.

تو این جلسه قراره تمام فوت و فن‌های مربوط به background ها رو یاد بگیری و ببینی چطور می‌تونی با کنترل رنگ، عکس، تکرار، موقعیت و اندازه‌ی پس‌زمینه‌ها، سایتت رو از این رو به اون رو کنی. پس خوب حواست رو جمع کن و بزن بریم که کلی کار باحال داریم! 🚀

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

🤔چرا پس‌ زمینه‌ ها اینقدر مهم‌ان؟

فرض کن وارد یه اتاق می‌شی. اولین چیزی که توجهت رو جلب می‌کنه چیه؟ شاید رنگ دیوارها، یا طرح کاغذ دیواری، درسته؟ توی دنیای وب هم همینه! پس‌زمینه عناصر HTML مثل دیوارها و کف اتاق می‌مونن. می‌تونن یه رنگ ساده باشن، یه عکس خوشگل، یه الگوی تکرارشونده، یا حتی ترکیبی از این‌ها.

یادگیری کار با پس‌زمینه ها توی CSS بهت این قدرت رو می‌ده که:

• خوانایی متن رو بهتر کنی (با انتخاب رنگ پس‌زمینه مناسب).
• بخش‌های مختلف صفحه رو از هم جدا کنی.
• ظاهر سایتت رو جذاب‌تر و حرفه‌ای‌تر کنی.
• هویت بصری برندت رو تقویت کنی.

تو این جلسه، با مهم‌ترین ویژگی‌های CSS برای کنترل پس‌زمینه آشنا می‌شیم. پس بزن بریم!

ویژگی Background در CSS

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

• background-color: برای تعیین رنگ پس‌زمینه استفاده میشه.
• background-image: بهت اجازه میده یک تصویر رو به عنوان پس‌زمینه انتخاب کنی.
• background-repeat: نحوه تکرار تصویر پس‌زمینه رو کنترل میکنه (مانند تکرار در جهت افقی، عمودی، یا عدم تکرار).
• background-position: موقعیت قرارگیری تصویر پس‌زمینه رو در داخل عنصر مشخص میکنه.
• background-attachment: تعیین میکنه که آیا تصویر پس‌زمینه با اسکرول صفحه حرکت کنه یا ثابت بمونه.
• background-size: با background-size می‌تونی اندازه عکس پس‌زمینه رو کنترل کنی.

در ادامه این مطلب، هر یک از این ویژگی‌ها را به صورت جداگانه و با جزئیات بیشتری بررسی خواهیم کرد تا درک کاملی از نحوه کارکردشون به دست بیاری.

1️⃣ رنگ پس‌ زمینه (background-color)

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

فرمت کلی استفاده از این ویژگی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

value یا مقدار می‌تونه نام رنگ (مثال red)، کد هگزادسیمال، RGB یا HSL باشه.

مثال فرض کن می‌خوای پس‌زمینه بدنه یا body یه صفحه رو آبی روشن کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

به همین راحتی! می‌تونی از هر رنگی که دوست داری استفاده کنی و رنگ پس زمینه رو مطابق با سلیقه ات تغییر بدی 🙂

2️⃣ تصویر پس‌ زمینه (background-image)

اگه دلت یه پس‌زمینه با طرح و نقش یا یه عکس خاص خواست چی؟ اینجا background-image وارد می‌شه! با این ویژگی می‌تونی یه عکس رو به عنوان پس‌ زمینه عنصرت انتخاب کنی.

فرمت کلی استفاده از این ویژگی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

نکات مهم:

• مقدار url() آدرس فایل تصویر ر, دریافت میکنه. این آدرس میتونه یک مسیر نسبی (نسبت به فایل CSS) یا یک URL مطلق (آدرس کامل اینترنتی) باشه.
• همچنین میتونی چندین تصویر رو با جدا کردن اونا با کاما مشخص کنی

مثال: بیا یه عکس پس زمینه کل صفحه (body) بدیم:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

✔️ توجه: اگه هم background-color و هم background-image رو تنظیم کنی، رنگ پس‌زمینه زیر عکس قرار می‌گیره و اگه عکس شفافیت داشته باشه یا کامل عنصر رو نپوشونه، اون رنگ دیده می‌شه.

3️⃣ تکرار پس‌ زمینه (background-repeat)

وقتی عکس پس‌ زمینه کوچیک‌تر از عنصری باشه که بهش اختصاص داده شده، CSS به‌طور پیش‌فرض اون عکس رو مثل کاشی کنار هم تکرار می‌کنه تا کل فضا رو پر کنه (هم افقی و هم عمودی). اما شاید تو این رفتار رو نخوای! با background-repeat می‌تونی نحوه تکرار عکس رو کنترل کنی.

مقادیر ممکن:

• repeat: تکرار در هر دو جهت افقی و عمودی (پیش‌فرض).
• repeat-x: فقط در جهت افقی تکرار کن.
• repeat-y: فقط در جهت عمودی تکرار کن.
• no-repeat: اصلاً تکرار نکن! عکس فقط یک بار نمایش داده می‌شه. 🧱

مثال: فرض کن می‌خوای لوگوی مدنظرمون فقط یک بار نمایش داده بشه و تکرار نشه:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

4️⃣ موقعیت پس‌ زمینه (background-position)

حالا که تکرار رو کنترل کردی، وقتشه بگی عکس پس زمینه (مخصوصاً اگه no-repeat یا بدون تکرار باشه) دقیقاً کجای عنصر قرار بگیره. background-position این کار رو برات انجام می‌ده.

نحوه استفاده: خاصیت background-position معمولاً دو مقدار میگیره: مقدار اول برای موقعیت افقی (محور X) و مقدار دوم برای موقعیت عمودی (محور Y).

مقادیر قابل استفاده:

• کلمات کلیدی:
  • top, bottom, left, right, center
  • میتونی این کلمات کلیدی رو به صورت ترکیبی نیز استفاده کنی، مانند top left, bottom right, center center (یا فقط center).
• مقادیر عددی: میتونی از واحدهای اندازه‌گیری مانند پیکسل (px), درصد (%, em, rem ) و غیره برای تعیین فاصله از لبه‌های عنصر استفاده کنی.

نکته!

• برای مقادیر عددی، مقدار اول فاصله از لبه چپ و مقدار دوم فاصله از لبه بالا رو مشخص میکنه.
• ترکیب کلمات کلیدی و مقادیر عددی: میتونی کلمات کلیدی رو با مقادیر عددی ترکیب کنی، مثل top 20px (از بالای عنصر 20 پیکسل فاصله داشته باشه و به صورت افقی در وسط قرار بگیره).

مثال‌ شماره یک (وسط چین کردن پس‌زمینه):

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

مثال‌ شماره دو (قرار دادن پس‌ زمینه در گوشه بالا راست):

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

مثال شماره سه (قرار دادن پس‌زمینه با فاصله مشخص از بالا و چپ):

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا: پس زمینه 50px از چپ، 20px از بالا فاصله میگیره 🙂

5️⃣ چسبندگی پس‌ زمینه (background-attachment)

این ویژگی تعیین می‌کنه که وقتی کاربر صفحه رو اسکرول می‌کنه، عکس پس‌زمینه همراه با محتوا حرکت کنه یا توی جاش ثابت بمونه.

مقادیر اصلی:

• scroll: پس‌زمینه همراه با محتوای عنصر اسکرول می‌شه (پیش‌فرض).
• fixed: پس‌زمینه نسبت به پنجره مرورگر ثابته و با اسکرول جابجا نمی‌شه. این می‌تونه افکت جالبی مثل پارالاکس (Parallax) ایجاد کنه.

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

سلام چطوری؟

6️⃣ اندازه پس‌ زمینه (background-size)

عکس پس‌زمینه ممکنه اندازه‌ ش با عنصرت نخونه. یا خیلی بزرگ باشه یا خیلی کوچیک. با background-size می‌تونی اندازه عکس پس‌زمینه رو کنترل کنی.

مقادیر کاربردی:

• auto: اندازه واقعی عکس (پیش‌فرض).
• cover: اندازه عکس رو طوری تغییر می‌ده (بزرگ یا کوچیک می‌کنه) که کل فضای عنصر رو بپوشونه. ممکنه بخش‌هایی از عکس بیرون بزنه یا بریده بشه، ولی فضای خالی نمی‌مونه. (خیلی پرکاربرد!)
• contain: اندازه عکس رو طوری تغییر می‌ده که کل عکس داخل عنصر جا بشه، بدون اینکه چیزی ازش بریده بشه. ممکنه فضای خالی در اطراف عکس باقی بمونه.

مثال: استفاده از cover برای پوشاندن کامل فضا:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کوتاه نویسی ویژگی background : همه چی تو یه خط! ✍️

فرض کن یه خونه داری که می‌خوای رنگ کنی، کاغذ دیواری بزنی، یه تابلو هم آویزون کنی و یه فرش هم بندازی. اگه بخوای جدا جدا بگی، کلی حرف می‌شه! 😅

حالا فکر کن یه جور “فرمان همه‌کاره” داشته باشی که بگی: “این خونه رو آبی کن، یه عکس گل هم بزن، تکرار هم نشه، ثابت هم باشه و وسط دیوار باشه!” اینجوری خیلی سریع‌تر و کوتاه‌تره، نه؟ 😉

توی CSS هم یه همچین چیزی داریم برای پس‌زمینه، اسمش کوتاه نویسی ویژگی background هست! ✨

به جای اینکه بیای جدا جدا بگی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

می‌تونی همه‌شو تو یه خط خلاصه کنی: 👇

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

ترتیب استفاده از مقادیر background هم به صورت زیره:

1. background-color: اول از همه رنگ پس‌زمینه رو مشخص کن.
2. background-image: بعدش آدرس عکس پس‌زمینه رو بنویس.
3. background-repeat: حالا بگو عکست تکرار بشه یا نه .
4. background-attachment: مشخص کن موقع اسکرول، پس‌زمینه ثابت بمونه یا حرکت کنه.
5. background-position: بگو عکست دقیقاً کجای عنصر قرار بگیره.
6. / (اسلش): اگه می‌خوای اندازه پس‌زمینه (background-size) رو هم مشخص کنی، بعد از موقعیت یه اسلش بذار.
7. background-size: در آخر هم اندازه پس‌زمینه رو تعیین کن.

یعنی فرمت کلی به اینصورت میشه :

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

جمع‌بندی و پایان

خب رفیق! تبریک می‌گم! 🎉 تو این جلسه با دنیای جذاب پس‌زمینه ها در CSS آشنا شدی. یاد گرفتی که چطور:

• رنگ پس‌زمینه رو با background-color تنظیم کنی.
• عکس پس‌زمینه رو با background-image قرار بدی.
• تکرار عکس رو با background-repeat کنترل کنی.
• موقعیت عکس رو با background-position مشخص کنی.
• رفتار عکس موقع اسکرول رو با background-attachment تعیین کنی.
• اندازه عکس پس‌زمینه رو با background-size مدیریت کنی.
• و چطور همه این‌ها رو با background خلاصه کنی !

پس‌زمینه ها ابزار خیلی قدرتمندی برای طراحی ظاهر وب‌سایت هستن. یه پس‌زمینه خوب و درست انتخاب شده می‌تونه تجربه کاربری رو خیلی بهتر کنه و سایتت رو حرفه‌ای و دلنشین نشون بده.

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

امیدوارم این جلسه برات مفید بوده باشه. تو جلسه بعدی سراغ مباحث جذاب دیگه‌ای از CSS خواهیم رفت. تا جلسه بعدی، بدرود! 👋