Немного о 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> </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
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
О свойстве CSS "background"
ОписаниеПараметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более... читать далее
Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS
Предположим, что нам нужно сделать страничку, на которой будут выкладываться файлы разных типов (архивы, картинки, документы), и при этом мы хотим, чтобы каждый тип файла выделялся, но для того,... читать далее
как создавать очень красивые и удобные текстовые кнопки
Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.... читать далее
Сокращённые свойства
Зачем задавать картинку через background-image, если можно просто написать background? Давайте разберёмся... читать далее
Веб-дизайн / CSS для начинающих. CSS кнопки это просто
Решил я начать новую серию статей — «CSS для начинающих», надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам… Источник: Уроки CSS на Хабрахабре... читать далее
Скругленные границы через CSS
Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет... читать далее
Комментарии (1)
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте
аренда кадиллака в Москве с водителем