Немного о CSS свойством «background-image»

CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?

Используется оно так:

background-image: url(men1-1.jpg);

В этом случае всю страницу «замостит» нашим рисуночком, примерно так, как плиткой в ванной комнате.

Но фоновый рисунок можно использовать и однократно, расположив его в нужном нам месте страницы. Для этого используются CSS свойства « background-repeat » и « background-position ».

Используя « background-repeat » мы можем использовать фоновый рисунок однократно— « background-repeat: no-repeat ;» или размножив по горизонтали или вертикали— « background-repeat: repeat-x ;» и « background-repeat: repeat-у ;». Первый вариант размножает рисунок по горизонтали, второй— по вертикали.

Используя CSS свойство « background-position » мы можем задать координаты начала нашей заливки. Используется так:

background-position: left top;

В данном случае заливка начнется от верхнего левого угла страницы. Значения можно задать, кроме того, в пикселах или процентах— « background-position: 200 100 ;» Отсчёт ведётся от верхнего левого угла страницы (или блока).

При совместном использовании « background-repeat » и « background-position » имейте ввиду, что не все будет работать, как ожидаете. Например « background-repeat:repeat-у » и « background-position: 100 100 » выдаст вам вертикальную полосу с вашим рисунком, отстоящую от левого края страницы на 100 пикселей. Начать размножение с заданного значения 100 пикселей по вертикали не удастся.

Кроме того, довольно интересно работает заливка рисунками, которые больше ширины страницы. Порой совершенно неожиданно...

<style type="text/css"> <!-- body {  margin-left: 0px;  margin-top: 0px;  margin-right: 0px;  margin-bottom: 0px;    /*примеры использования свойства "background-image" в CSS*/  /*используется фоновый рисунок 100х100px-фоновый рисунок меньше ширины страницы*/    /*полная заливка фоновым рисунком */  /*  background-image: url(fon1.gif);  */      /*заливка фоновым рисунком по вертикали*/  /*  background-image: url(fon1.gif);  background-repeat: repeat-y;  background-position: left top;  */    /*заливка фоновым рисунком по горизонтали*/  /*   background-image: url(fon1.gif);  background-repeat: repeat-x;  background-position: left top;  */    /* попытка размножить фоновый рисунок с заданного места по горизонтали- не совсем удачно*/  /*  background-image: url(fon1.gif);  background-repeat: repeat-x;  background-position: 100px 100px;  */    /*размножение фонового рисунка по вертикали */  /*  background-image: url(fon1.gif);  background-repeat: repeat-y;  background-position: 100px;   */    /* пример использования свойства "background-image" в CSS*/  /*используется рисунок 1600х5px- в результате вся страница заливается одним рисунком*/  /*  background-image: url(fff1.jpg);  background-position: 100px;  */  } --> </style>

Теперь о интересном :)

На сайте был материал об использовании нескольких классов CSS применительно к одному объекту. Как применить несколько классов к одному объекту смотрим на этой странице . Недавно возникла мысль использовать эту возможность для создания кнопочек на сайте в виде вкладок. Обычные вкладочки в виде ярлычков с закругленными уголками... Эдакое CSS меню сделать...

Простая идея сделать три класса с разными фонами (два уголка— правый и левый, серединка как заливка всей кнопочки) и применить все три класса к одному блоку потерпела фиаско.

По идее, ожидаемо, описания одного класса просто перешибают описания предыдущего...

Возникла тогда идея сделать все с использованием вложенных DIV-ов. Примерно как при использовании таблиц— один фоновый рисунок на таблицу, и свои для ячеек.

Теоретически, всё должно работать— вкладываем друг в друга три блока, в самом первом (наружном) прописываем « background-repeat: repeat-y ;» и используем серединку нашей кнопочки, в последующих « background-repeat: no-repeat ;» и « background-position: left top ;» и « background-position: right top ;» с использованием уголков.


В итоге родилось:

<style type="text/css"> <!-- #knop {  margin: 0px;  padding: 0px;  width: 120px;  height: 20px; } .k1 {  background-image: url(men1-1.jpg);  background-repeat: no-repeat;  background-position: left top; } .k2 {  background-image: url(men1-3.jpg);  background-repeat: repeat-x;  background-position: left top; } .k3 {  background-image: url(men1-2.jpg);  background-repeat: no-repeat;  background-position: right top; } #knop2 {  margin: 0px;  height: 20px;  width: 120px;  padding: 0px;  text-align: center;  vertical-align: middle; } #knop3 {  padding: 0px;  margin-right: 10px;  margin-left: 10px; } --> </style> <body> <p>&nbsp;</p> <!--заливка одним фоном --> <div class="k2 k1" id="knop" >ooo</div><br /> <!--заливка двумя фоновыми рисунками --> <div class="k2" id="knop" ><div class="k1" id="knop" >ooo</div></div><br /> <!--заливка тремя фоновыми рисунками- работает при задании точного и одинакового размера всем трем блокам --> <div class="k2" id="knop" > <div class="k1" id="knop" > <div class="k3" id="knop2" > oohhhhhhhhh </div> </div> </div> <br /> <!--заливка тремя фоновыми рисунками с четвертым блоком с заданием в нем отступов- работает работает корректно в эксплорере --> <div class="k2" id="knop" > <div class="k1" id="knop" > <div class="k3" id="knop2" >   <div id="knop3">oohhhhhhhhhhhhhhhhhhhho</div> </div> </div> </div> <br /> </body>

Не лучший вариант, как оказалось... иногда, конечно, можно использовать. Если заранее знать, что текст в кнопках будет короче самой кнопки. Подозреваю, что и тут можно разобраться и заставить всё работать...

оригинал статьи: style-css.ru