آموزش خاصیت های image – set position و no-repeat

بازدید: 1978 بازدید

آموزش خاصیت های image – set position و no-repeat

 

نکته حین استفاده از یک تصویر پس زمینه، سعی کنید از آن تصویری استفاده کنید که قالب متن را برهم نمی زند .
به منظور نمایش تصویری برای تنها یکبار کافی است از خاصیت background-repeat بهره بگیرید (این خاصیت تعریف می کند که تصویر مربوطه تنها یک مرتبه تکرار شود )

مثال

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

در مثال فوق، تصویر پس زمینه درست در مکانی یکسان با متن نمایش داده شده است .
حال می خواهیم موقعیت (position)تصویر را تغییر دهیم تا از این طریق تصویر مذکور شکل متن مورد نظر را برهم نزد .
موقعیت تصویر توسط خاصیت background-position تعیین می گردد

مثال

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

در ادامه با آموزش های بعدی ما همراه باشید…