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

در این راهنما «کوتاه نویسی پس زمینه (Background Shorthand)» را می بینید. با این روش می توانید همه ویژگی های پس زمینه را در یک اعلان بنویسید و کدتان تمیزتر شود.

کوتاه نویسی پس زمینه چیست؟

به جای تعیین تک تک ویژگی ها، می توانید از ویژگی واحد background استفاده کنید. نمونه کامل در مقابل کوتاه نویسی:

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

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

نکته: برای مرور مفاهیم پایه به صفحات پس زمینه و پیوست پس زمینه نیز سر بزنید.

ترتیب مقادیر در کوتاه نویسی پس زمینه

هنگام استفاده از background، مقادیر در این ترتیب می آیند. اگر مقداری حذف شود، بقیه باید همین ترتیب را حفظ کنند:

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment

هشدار: اگر background-size را کنار background-position می نویسید، بین آن ها از اسلش / استفاده کنید. (مثال آموزشی در بخش های بعدی خواهد آمد.)

نمونه کوتاه نویسی با موقعیت و تکرار

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

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