آموزش کار با پس زمینه ها یا Backgrounds در CSS

مقدمه

در طراحی رابط کاربری، استفاده درست از پس‌زمینه‌ها (Backgrounds) تأثیر بسیار زیادی در زیبایی و جذابیت سایت دارد. با کمک ویژگی‌های Background در CSS می‌توان رنگ، تصویر، موقعیت، اندازه و تکرار پس‌زمینه را کنترل کرد. اگر می‌خواهید به صورت حرفه‌ای CSS را یاد بگیرید، پیشنهاد می‌کنیم این دوره کامل را مشاهده کنید: دوره جامع آموزش CSS.

توضیح مفهومی Background در CSS

ویژگی‌های Background به شما اجازه می‌دهند ظاهر پس‌زمینه عناصر را کنترل کنید. مهم‌ترین خصوصیات Background شامل موارد زیر هستند:

• background-color → تعیین رنگ پس‌زمینه
• background-image → قرار دادن تصویر
• background-repeat → کنترل تکرار تصویر
• background-position → تعیین محل تصویر
• background-size → تنظیم اندازه تصویر
• background → شورت‌هند برای همه ویژگی‌ها

مثال عملی استفاده از Background

تعیین رنگ پس‌زمینه:

div {
  background-color: lightblue;
}

قرار دادن تصویر پس‌زمینه:

body {
  background-image: url("bg.jpg");
}

جلوگیری از تکرار تصویر:

.box {
  background-repeat: no-repeat;
}

تنظیم اندازه تصویر:

.hero {
  background-size: cover;
}

استفاده از شورت‌هند:

.section {
  background: url("bg.jpg") no-repeat center/cover;
}

نکات مهم و توضیحات تکمیلی

• ویژگی background-size: cover برای طراحی حرفه‌ای بسیار مهم است.
• از تصاویر سبک برای افزایش سرعت سایت استفاده کنید.
• پس‌زمینه مناسب باعث بهبود تجربه کاربری می‌شود.
• استفاده صحیح از Background نقش مهمی در طراحی Responsive دارد.

ادامه آموزش CSS

برای یادگیری کامل طراحی رابط کاربری، کار با تصاویر، افکت‌های مدرن و تکنیک‌های حرفه‌ای CSS، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.