ویژگی background-repeat در css پس زمینه 1401

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی background-repeat در css توضیحاتی را ارائه نماییم. ویژگی کاربردی background-repeat در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.

معرفی ویژگی کاربردی background-repeat در زبان طراحی سی اس اس

توسط خاصیت background-repeat می توان تعیین کرد که تصویر تکرار شود یا نه و یا اینکه چگونه تکرار شود.

مقادیر صفت background-repeat در زبان طراحی css

صفت background-repeat که در زبان طراحی CSS1 معرفی شده است، 8 مقدار می پذیرد که عبارتند از:

مقدار repeat
مقدار repeat-x
مقدار repeat-y
مقدار no-repeat
مقدار space
مقدار round
مقدار initial
مقدار inherit

مقدار repeat درون خاصیت background-repeat در زبان سی اس اس

اگر برای خاصیت background-repeat را برابر با مقدار repeat قرار دهیم، در حقیقت تصویر پس زمینه تگ html مربوطه در هر دو جهت محور x و y تکرار می شود. این مقدار حالت پیش فرض این ویژگی به حساب می آید.

div{background-repeat:repeat;}

مقدار repeat-x درون ویژگی background-repeat در css

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

مثال براساس مقدار repeat-x برای خاصیت background-repeat

div{background-repeat:repeat-x;}

مقدار repeat-y درون خاصیت background-repeat در زبان سی اس اس

اگر خاصیت background-repeat را برابر با مقدار repeat-y قرار دهیم، در حقیقت تصویر پس زمینه تگ html مربوطه در جهت محور x تکرار می شود.

مثال براساس مقدار repeat-y برای خاصیت background-repeat

div{background-repeat:repeat-y;}

مقدار no-repeat درون خاصیت background-repeat در زبان css

اگر خاصیت background-repeat را برابر با مقدار no-repeat قرار دهیم، در این حالت تصویر پس زمینه تگ html مربوطه در هیچ کدام از جهت ها در محور x و y تکرار نمی شود.

مثال براساس مقدار no-repeat برای خاصیت background-repeat

div{background-repeat:no-repeat;}

مقدار space درون ویژگی background-repeat در css

اگر خاصیت background-repeat را برابر با مقدار space قرار دهیم، باعث می شوند تا تصویر پس زمینه به اندازه ای که در تگ html مربوطه فضا وجود دارد، تکرار شود. البته فضاهای خالی باقی مانده بین تکرارها بصورت مساوی تقسیم می شود.

مثال براساس مقدار space برای خاصیت background-repeat

div{background-repeat:space;}

مقدار round درون خاصیت background-repeat در زبان css

اگر خاصیت background-repeat را برابر با مقدار round قرار دهیم، تصویر پس زمینه با توجه به اندازه اش تا جایی که در تگ html مورد نظر فضا وجود داشته باشد، تکرار می شود.

و اگر فضایی باقی ماند تکرارهای تصویر پس زمینه در جهتی که مشخص شده است، کشیده می شوند تا اینکه فضاهای خالی پر شوند.

مثال براساس مقدار round برای خاصیت background-repeat

div{background-repeat:round;}

مقدار initial درون خاصیت background-repeat در زبان سی اس اس

اگر خاصیت background-repeat را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

ویژگی background-repeat در css صفت تکرار پس زمینه

مقدار inherit درون ویژگی background-repeat در css

اگر خاصیت background-repeat را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه ، خصوصیت مذکور را از والد پدری خود به ارث می برد.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery

بررسی خاصیت background-repeat از نظر نسخه زبان طراحی css

ویژگی کاربردی background-repeat در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.

بررسی ساختاری خصوصیت background-repeat


عناوین ساختاری خاصیت background-repeat	وضعیت ساختاری خاصیت background-repeat
مقدار پیش فرض	repeat
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS1
سینتکس صفت در جاوا اسکریپت	"object.style.backgroundRepeat="repeat-x