background-image в CSS


Содержание

Фоновые изображения в CSS

Для любого элемента в документе можно установить фоновое изображение используя CSS свойство: background-image .

Возможные значения свойства background-image :

  • url — абсолютный или относитльный путь к файлу с изображением.
  • none — изображение отсутствует, это значение по умолчанию.

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

Если фоновое изображение не заполняет собой всё пространство элемента, то он выкладывается «плиткой».

Фиксация фонового изображения

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

Фоновое изображение можно зафиксировать. Для этого в CSS применяется свойство background-attachment . По умолчанию его значение равно scroll (прокрутка или подвижный фон).

То есть прошлый пример полностью аналогичен следующему:

Чтобы зафиксировать фоновое изображение свойству background-attachment нужно назначить значение fixed . Исправим предыдущий пример и посмотрим как он будет работать:

Значения scroll и fixed для свойства background-attachment были в версии CSS2.1. В спецификации CSS3 появилось дополнительное значение для этого свойтва — local .

При использовании свойтва local , а применять его имеет смысл к блокам в документе, фоновое изображение блока будет прокручиваться, если блок имеет полосу прокрутки и пользователь прокручивает её. Тогда содержимое блока и фоновое изображение прокручиваются в блоке. При прокрутке страницы, а не блока, фоновое изображение блока прокручивается вместе с внеблоковым содержимым документа. Это проще один раз увидеть, чтобы понять. Вот пример:

На этом тема фиксации фоновых изображений в рамках этой статьи закрыта.

Повторение фонового изображения

Выше в статье писалось, фоновый рисунок повторяется «плиткой», если не занимает всей площади блока. Управлять вариантами повторений фонового изображения можно при помощи свойства background-repeat . Возможные значения этого свойства:

  • repeat — фоновый рисунок повторяется «плиткой» (значение по умолчанию).
  • no-repeat — фоновый рисунок не повторяется, показывается только один раз.
  • repeat-x — повторять изображение только по горизонтали.
  • repeat-y — повторять изображение только по вертикали.

Теперь тот же самый пример, только повторим изображение по вертикали.

Позиционирование фонового изображения

Изменить начально положение фонового изображения, заданного свойством background-image , можно при помощи свойства background-position . Если быть точным, задаётся позиция верхнего левого угла изображения.

Для позиционирования можно использовать следующие ключевые слова:

Позиционирование по горизонтали:

  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

Позиционирование по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.

Кроме ключевых слов можно использовать единицы измерения CSS такие как пикселы, проценты и прочие.

Свойство background

Свойство background является базовым и используя его можно задать значение всех дочерних свойств, описаных выше.

  • background-color — работа с этим свойством подробно описана в статье «Цвета в CSS»
  • background-attachment
  • background-image
  • background-position
  • background-repeat

При использовании свойства background параметры задаются через пробел в любом порядке, только параметры позиционирования при совпадии значений устанавливаются сначала для горизонтали, потом для вертикали.

Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

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

Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:

  • background-color — задает цвет фона для любого Html элемента;
  • background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
  • background-repeat — параметр повторения фоновой картинки;
  • background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
  • background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

Далее рассмотрим подробнее каждое свойство.

Background-color и background-image

Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent| |inherit

Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.

Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:

У этого абзаца черный фон и белый текст

Либо так в коде CSS файла:

p <
background-color:#000000;
color:#ffffff
>

У этого абзаца черный фон и белый текст

Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.

Как вы могли заметить из примера, если фоновое изображение меньше, чем элемент страницы, для которого оно задано, то картинка повторяется по вертикали и горизонтали пока не замостит собой весь элемент. Параметры этого повторения задает следующий элемент.

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

Илон Маск рекомендует:  unicode-bidi в CSS

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

Позиционирование фона с помощью background-position

Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:

Горизонтальная позиция может принимать следующие значения:

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

  • left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру элемента;
  • right — фон прижимается к правому краю элемента.

Вертикальная позиция может иметь следующие значения:

Числовое значение указывает местоположение фонового изображения по вертикали и задается абсолютными или относительными единицами измерения.

  • top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру;
  • bottom — фон прижимается к нижнему краю.

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

Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

background-image:url (//webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;

Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:

Вообще соотношение между ключевыми словами и процентной записью следующее:


  • top left = left top = 0% 0% (выравнивание по левому верхнему углу)
  • top = top center = center top = 50% 0% (вверху по центру)
  • right top = top right = 100% 0% (по правому верхнему углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (по левому нижнему углу)
  • bottom = bottom center = center bottom = 50% 100% (внизу по центру)
  • bottom right = right bottom = 100% 100% (по правому нижнему углу)

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

Фиксация фона background-attachment

По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:

scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

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

Сборное правило background

Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:

background: url (//webcodius.ru/example/logo.png) 50% no-repeat;

А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

Background-image: установка фонового изображения

Возможность задать фоновое изображение для элемента при помощи CSS — это своего рода волшебная палочка, ключ к созданию поистине впечатляющего дизайна. Используя фоновые рисунки, можно существенно преобразить внешний вид страницы, задать необходимый тон и настроение. Просто взгляните на несколько примеров ниже, и вы поймете, о чем идет речь:

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

В данном уроке мы познакомим вас с одним из нескольких свойств, отвечающих за настройку фона в CSS — это свойство background-image . В следующих уроках мы рассмотрим остальные свойства, а также сокращенную запись background.

Возможности свойства CSS background-image

Свойство background-image устанавливает выбранное изображение в качестве фона элемента. В зависимости от цели, можно задать графический фон как для отдельного блока, так и для всей страницы. В качестве единственного значения принимается URL-адрес графического файла. Запись выглядит так:

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

Как сделать картинку фоном в HTML и CSS. 3 простых способа

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

  • Покрывается 100% ширины и высоты страницы
  • Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
  • Сохраняются пропорции картинки (aspect ratio)
  • Изображение центрировано на странице
  • Фон не вызывает скроллов
  • Решение максимально кроссбраузерное
  • Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

Этот способ работает в:

  • Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
  • IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

Илон Маск рекомендует:  Что такое код ereg

Свойство CSS background-image в веб-дизайне

Каждый знает эту знаменитую фразу: «Театр начинается с вешалки». А с чего начинается веб-сайт? Представьте себе, что у вас много идей в голове, которыми вы хотите поделиться с миром, то есть вы хотите стать блогером. Идеи это хорошо, но сразу встает вопрос: «А как будет выглядеть мой блог, какая цветовая гамма, фон?».

И здесь мы подошли к главному, перефразируем так: «Сайт начинается с фона». Большинство блогеров делают «классические блоги» с белым фоном, но мы пойдем другим путем. Пройти мимо замечательного свойства CSS background-image, мы никак не можем.

А что оно делает? Это свойство CSS background-image вставляет картинку в качестве фона в разные элементы HTML-страницы. Оно не ограничивается только тегом body, а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer.

Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы рассмотрим пять CSS правил, которые позволяют задать фон для любого элемента в Html — background-position (image, repeat, color, attachment). Ну, и про составное правило Background тоже не забудем упомянуть.

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

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

Color, background-color и background-image

Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color. На самом деле тут все просто. Синтаксис совершенно обычный и цвет вы можете задавать в соответствии с тем, как это делали в языке гипертекстовой разметки. Как вы помните, цвета можно задавать с помощью шести цифр кода, поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).

Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:

Для примера я окрасил этот маленький абзац в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев (более темный), который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через color это довольно просто, а вот с фоном будет немного посложнее.

Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное. Чтобы их увидеть, можете перейти на страницу текущей спецификации консорциума W3C и поискать там что-нибудь со словом Background:

    background color — с помощью этого правила задается цвет фона для любого Html элемента. В нем можно использовать либо код, либо название оттенка, т.е. все в точности так, как и было при использовании color.

background image — с помощью него можно в качестве фона использовать картинку (но обязательно прочитайте про то, как уменьшить вес фотографии, ибо тяжелые картинки будут тормозить загрузку страниц), путь до которой будет указан в функционале url ().

Путь можно указывать в Url как относительный, так и абсолютный. Использование фоновой картинки вовсе не запрещает вам одновременно использовать заливку цветом с помощью background-color. Эти CSS правила не являются взаимоисключающими.

  • background repeat — можно задать повторение картинки фона либо только по горизонтали в один ряд, либо только по вертикали, либо вообще запретить ее повторение.
  • background position — позволяет точно задать позицию этого изображения как в процентах, так и в абсолютных величинах
  • background attachment — позволяет выбрать тип привязки точки отсчета при позиционировании изображения для фона: либо относительно конкретного Html элемента, либо относительно области просмотра (видимой на экране компьютера области веб страницы).
  • Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью атрибута Style).

    Если вы заглянете в спецификацию, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах форм (select, input) он по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных тегов языка гипертекстовой разметки.

    Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):

    Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.

    Все остальные четыре CSS правила будут касаться только фоновой картинки, которую можно задать для любого Html элемента и, при желании, точно ее позиционировать. Какой именно графический файл будет использоваться, можно задать с помощью background-image.

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

    Например, для этого абзаца я использовал графический файл с фоном, путь до которого описан чуть выше. Видите, что вся область, отведенная под этот абзац, застилилась повторяющимся изображением, которое в оригинале имеет такой вид:

    Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?

    Background-repeat — повтор фоновой картинки

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

    Следовательно, с помощью background-repeat мы сможем управлять повторениями фоновой картинки. У этого правила может быть только четыре значения:

    1. repeat — задает повтор картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле не нужно
    2. repeat-x — она будет повторяться только по горизонтали и получится в результате только одна строка с повторами. Не забудьте, что правило background-repeat не будет работать, если вы не задали в background-image путь до фоновой картинки:
    3. repeat-y — будет повторяться только по вертикали (получится один столбец из повторов):
    4. no-repeat — вообще не будет повторяться и мы получим одно единственное изображение в левом верхнем углу области того Html элемента, для которого оно используется:

    Background-position — позиционирование фона

    Теперь возникает вопрос, а можно ли фоновую картинку отодвинуть от левого верхнего угла области ограничивающей размер элемента. Конечно же, можно, и для этой цели служит отдельное правило background-position:

    Посмотрев на спецификацию CSS становится ясно, почему фоновая картинка по умолчанию прижимается именно к верхнему левому краю области Html элемента. Потому что значение «0% 0%» является умолчательным для правила background position.

    Илон Маск рекомендует:  Изящная деградация

    Ну, а когда это правило в явном виде для элемента не задано (как в нашем случае), то браузер выбирает то его значение, которое принято в спецификации по умолчанию (замечу, что отчет осей координат в CSS ведется как раз от верхнего левого края области элемента).

    Так же из спецификации видно, что для позиционирования изображения фона с помощью background-position можно использовать как относительные (проценты), так и абсолютные величины (например, пиксели или другие единицы размеров применимые в CSS). Ну, а так же можно использовать слова, которые будут соответствовать определенным цифровым значениям. Но обо все по порядку.

    При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения:

    background-image

    Поддержка браузеров

    IE Opera Chrome Firefox Safari
    IE до 7.0 (включ.) не поддерживает значение inherit + + + +


    Пример

    Как задать фоновое изображение для элемента body:

    Описание и использование

    Свойство background-image определяет используемое изображение фона для элемента.

    Фон элемента это сумма элемента + границы и поля (но не отступы).

    По умолчанию, фоновое изображение размещается в верхнем левом углу элемента, и повторяется по вертикали и по горизонтали.

    Значение по умолчанию: нет
    Наследуется: нет
    Версия: CSS1

    Советы

    Совет: Всегда определяйте свойство background-color, если изображение не доступно.

    CSS background-image Property

    The CSS background-image property specifies background images for elements. There can be used one or more images.

    By default, a background-image is placed at the top-left corner of an element, and is repeated both vertically and horizontally.

    The background of an element is the total size of the element, so it includes padding and border, but not the margin.

    If the image you set is unavailable, you need to define a background-color.

    Initial Value none
    Applies to All elements. It also applies to ::first-letter and ::first-line.
    Inherited No.
    Animatable No.
    Version CSS1 + some new values in CSS3
    DOM Syntax object.style.backgroundImage = «url(img_tree.png)»;

    Syntax

    Example

    See another example where two images are used and they are specified with the help of the background-position property.

    Example

    In this example a «linear-gradient» with two colors is specified as a background image for a

    Example

    Here is an example with «repeating-radial-gradient» value with three colors.

    Работа с картинками (изображениями) в CSS

    2013-03-01 / Вр:23:32 / просмотров: 103336

    Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.
    Я не буду здесь делать большое вступление, а приступлю сразу к делу.
    Итак, в этой статье я расскажу о всех возможных способах работы с изображениями: вставка фонового изображения, выравнивание изображения, прозрачность, тень от картинки и т.д.

    Фоновая картинка.

    background | background-image

    Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

    Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
    Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

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

    Повтор фоновой картинки.

    background-repeat

    Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

    background-repeat: repeat-y | repeat-x | no-repeat;

    repeat-y — повтор фонового изображения по оси — у (вертикаль);
    repeat-x — повтор фонового изображения по оси — х ( горизонталь);
    no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

    Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

    Как добавить две фоновые картинки на веб-страницу.

    background

    Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
    Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
    Зададим фоновое изображение к элементам — HTML и BODY.

    Картинка по центру.

    Существуют несколько методов установить картинку по центру.

    Как в css изменить размер картинки.

    background-size

    Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
    В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

    По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

    Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

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

    а можно вот так:

    Обтекание (выравнивание) картинки текстом.

    float

    Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

    float: left | right | none ;

    left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

    right — выровнять картинку по правому краю, текст обтекает по левой стороне.

    none — выравнивание и обтекание не задается (значение по умолчанию).

    Здесь я указал отступы текста от картинки

    Тень картинки.

    box-shadow

    Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

    1. — inset — тень внутри элемента, без inset тень будет наружу;
    2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
    3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
    4. — размытие тени (0 — четкая тень);
    5. — растяжение тени (3px — растяжение, -3px — сжатие);
    6. — цвет тени

    box-shadow: 0 0 5px; — тень вокруг элемента

    box-shadow: inset 0 0 5px; — тень внутри

    Прозрачность картинки.

    Начну сразу с примера.

    Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

    С наилучшими пожеланиями Webmasterok2009

    background-image

    Свойство CSS background-image используется для установки фонового изображения любого HTML-элемента. Если изображение меньше размеров элемента, то оно дублируется (размножается) пока не заполнит весь элемент.

    Если используется background-image , то рекомендуется всегда указывать и фоновый цвет элемента, на тот случай, если в браузере будет отключен показ изображений. Кроме этого, вместо background-image можно использовать универсальное свойство background.

    Тип свойства

    Применяется: ко всем элементам.

    Значения

    Значением свойства background-image может быть один из следующих вариантов:

    • url(‘адрес файла’) — конструкция url(), где в скобках указывается полный или относительный адрес изображения для фона. Сам адрес можно брать в двойные (» «) или одинарные (‘ ‘) кавычки.
    • none — изображение для фона не используется.
    • inherit — наследует значение background-image от родительского элемента.

    Процентная запись: не существует.

    Значение по умолчанию: none.

    Синтаксис

    Пример CSS: использование background-image

    Результат. Использование свойства CSS background-image.

    Версии CSS

    Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
    Поддержка: Да Да Да Да

    Браузеры

    Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
    Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
    Поддержка: Частично Да Да Да Да Да

    Internet Explorer 6.0 и 7.0 не понимают значение inherit .

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL