background-repeat

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

به‌طور پیش‌فرض، ویژگی background-image یک تصویر را به صورت افقی و عمودی تکرار می‌کند.[۱]

بعضی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند، در غیر اینصورت آن‌ها عجیب به نظر می‌رسند، مانند این:

مثال
body {
  background-image: url("gradient_bg.png");
}


اگر تصویر بالا فقط به صورت افقی تکرار شود (background-repeat: repeat-x;)، پس زمینه بهتر به نظر می‌رسد:

مثال
1 body {
2   background-image: url("gradient_bg.png");
3   background-repeat: repeat-x;
4 }


نکته: برای تکرار یک تصویر به صورت عمودی، ویژگی background-repeat را برابر با repeat-y قرار دهید.

ویژگی background-repeat: no-repeat در CSS

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

مثال

نمایش تصویر پس زمینه فقط یک بار:

1 body {
2   background-image: url("img_tree.png");
3   background-repeat: no-repeat;
4 }


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

ویژگی background-position در CSS

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

مثال

موقعیت تصویر پس زمینه در گوشه بالا سمت راست تنظیم می‌کند:

1 body {
2   background-image: url("img_tree.png");
3   background-repeat: no-repeat;
4   background-position: right top;
5 }



منابع آموزشی