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

Декабрь 19, 2010 ||  css ||  комментарии

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

Надо было сверстать вот такой блок.

Multiple Backgrounds

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

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>

Multiple Backgrounds

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;
}

Multiple Backgrounds

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

.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 – для браузеров не понимающих множественный фон, modernizr.

По теме:

Где работает:

comments powered by Disqus