قرار دادن دو یا چند تصویر به صورت پس زمینه ( background images ) در یک دایو div

[mrsz 21]

در این مقاله نحوه قرار دادن دو یا چند تصویر به صورت پس زمینه ( background images ) در سایت و یا یک div دلخواه از سایت آموزش داده خواهد شد.

برای انجام اینکار از css3 کمک خواهیم گرفت.

مرورگر هایی که از مولتی بک گراند پشتیبانی می کنند به صورت زیر هستند و از نسخه های تعیین شده به بالا: (پس نسخه های بالا و جدید تمامی مروگر ها از این قابلیت پشتیبانی می کنند)

Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature

کد قراردادن دو تصویر در پس زمینه به صورت زیر تعریف می شود و آدرس هر تصویر به صورت پشت سر هم در تگ background-image: قرار خواهند گرفت.

#example1 {

width: 500px;

height: 250px;

background-image: url(sheep.png), url(betweensky.png);

background-position: center bottom, left top;

background-repeat: no-repeat;

}

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

و در تگ background-repeat: نحوه تکرار تصاویر تعیین شده است. که در کد بالا با قرار دادن no-repeat دستور دادیم که تصویر تکرار نشود. برای تکرار تصاویر می توانید از تکرار افقی repeat-x و یا تکرار عمودمی repeat-y استفاده کنید. برای هر تصویر باید به ترتیب و پشت سر هم قرار بگیرد.

و در مثالی دیگر کد قرار گرفتن 3 تصویر در پس زمینه آورده شده است: (کد زیر)

#exampleB {

display: inline-block;

margin: 1em; padding: 1em;

background-image: url(left.png), url(right.png), url(main.png);

background-repeat: no-repeat, no-repeat, repeat-x;

background-position: left top, right top, left top ;

}