Множественный фон

Как для меня так множественные фоновые картинки как возможность из CSS3 намного поинтереснее заюзанных переюзанных скругленных мать их уголков. Скругляется щас все и везде, царапаются что ли острые углы на кнопках ). Ладно.
Надо было сверстать вот такой блок.

Задача

Само собой данные в столбцах могут изменится как угодно, поэтому нужно чтобы вся конструкция тянулась в высоту. Множественный фон нужен потому что одна фоновая картинка это разделители столбцов, другая – фон в первом столбце который должен быть в нижнем правом углу.

HTML

<div class="plans">
	<div class="xen">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
</div>

CSS

.plans{
       background-image:
       url(“../img/xenplans_xen.png”),
       url(“../img/xenplans.png”) ;
       background-position: left bottom, left top;
       background-repeat: no-repeat, repeat-y;
}

Можно написать иначе:

.plans{
       background:
       url(“../img/xenplans_xen.png”) left bottom no-repeat,
       url(“../img/xenplans.png”) left top repeat-y;
}

А вот так нельзя:

.plans{
       background: url(“../img/xenplans.png”) left top repeat-y;
       background: url(“../img/xenplans_xen.png”) left bottom no-repeat;
}

IE

Для IE множественный фон работает при помощи скрипта PIE.

.plans{
       position: relative;
       -pie-background:
       url(“img/xenplans_xen.png”) -3px bottom no-repeat,
       url(“img/xenplans.png”) left top repeat-y;
       behavior: url(“css/pie.htc”);
}

Firefox 3.5

К сожалению в FF3.5 множественный фон еще не поддерживался, поэтому фон не отработал вообще.
Подправить это можно так:

.no-multiplebgs .plans{
       background-image: url(“../img/xenplans.png”) ;
       background-position: left top;
       background-repeat: repeat-y;
}

.plans:before{
       display: block;
       position: absolute;
       width: 187px;
       height: 100%;
       content: ” “;
       background-image: url(“../img/xenplans_xen.png”);
       background-position: left bottom;
       background-repeat: no-repeat;
}

.no-multiplebgs – селектор который означает что текущий браузер не понимает multiple background, создается джаваскриптовой библиотекой modernizr.

пример

Работает в:

По теме:

MDN: Multiple backgrounds
Multiple Backgrounds and Borders with CSS 2.1

Tags:

Комментировать