تکرار تصویر پس زمینه CSS

در این بخش با «تکرار تصویر پس زمینه (Background Image Repeat)» در CSS آشنا می شوید. می بینید تصویر پیش فرض چگونه در هر دو جهت تکرار می شود و چطور می توان تکرار را فقط افقی یا فقط عمودی یا اصلاً بدون تکرار تنظیم کرد.

ویژگی background-repeat و رفتار پیش فرض

ویژگی background-repeat مشخص می کند تصویر پس زمینه چگونه تکرار شود. به صورت پیش فرض، تصویر در محور افقی و عمودی تکرار می شود.

body {  background-image: url("gradient_bg.png");}

نکته: برای مطالعه مفاهیم پایه، صفحه تصویر پس زمینه را ببینید. همچنین برای مرور این صفحه با عنوان تکرار تصویر پس زمینه بازگردید.

تکرار افقی یا عمودی

برای تکرار فقط افقی از مقدار repeat-x استفاده کنید. این کار برای تصاویر گرادیانی افقی بهتر عمل می کند.

body {  background-image: url("gradient_bg.png");  background-repeat: repeat-x;}

نکته: برای تکرار فقط عمودی می توانید از repeat-y بهره ببرید.

بدون تکرار و جابه جایی تصویر

اگر می خواهید تصویر فقط یک بار نمایش داده شود، مقدار no-repeat مناسب است. سپس برای مزاحم نشدن متن، جای تصویر را تنظیم کنید.

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

تنظیم موقعیت با background-position

به صورت پیش فرض، تصویر در گوشه بالا-چپ قرار می گیرد. با background-position نقطه شروع را جابه جا کنید؛ مثلاً گوشه بالا-راست.

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

هشدار: چیدمان را بررسی کنید تا «تکرار تصویر پس زمینه» باعث برهم زدن خوانایی نشود. در صورت نیاز، به پس زمینه ثابت نیز سر بزنید.

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

برای جزئیات بیش تر درباره background-repeat و همچنین background-position به مستندات MDN مراجعه کنید.