background-repeat

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 }

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل