Немного о 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


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


6 марта 2009  1 25 331   CSS HTML уроки Версия для печати


Похожие публикации

Веб-дизайн / CSS для начинающих. CSS кнопки это просто

Решил я начать новую серию статей — «CSS для начинающих», надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам… Источник: Уроки CSS на Хабрахабре... читать далее

Web-разработка / Url в CSS

Недавно из-за своей невнимательности, наверное, обнаружил забавную вещь в css (поиском искал на Хабре — не нашел). При указании url фоновой картинки я забыл упомянуть расширение: .somediv {... читать далее

Скругленные границы через CSS

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

Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS

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

О свойстве CSS "background"

ОписаниеПараметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более... читать далее

как создавать очень красивые и удобные текстовые кнопки

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.... читать далее

Комментарии (1)

  1. #1 написал: tantrezas
    Группа: Гости
    10 марта 2009 07:48

    занес в закладки
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте По материалам: http://www.allpg.ru/vnutrenniy-golos-chast-2.html. . Трансферы ливерпуля 2015 лето самые дорогие трансферы лета.