Фоновое изображение background-image

Стр 1 из 3Следующая ⇒

Послание № 11

Картинки

Фоновое изображение background-image

background-image — устанавливает изображение в качестве фона для элемента.

Фоновым изображением может быть картинка или градиент.

Как пишется в коде:

div {

}

Адрес изображения указывается в скобках после ключевого слова url, путь до файла указывается по общим правилам «путей».

Повтор фоновых изображений background-repeat

Изначально (по умолчанию), браузер будет повторять фоновое по координате X и Y (вниз и вправо) до тех пор, пока не заполнит все пустое пространство. Это может быть хорошо для простого, повторяющегося фона, но не для картинок.

background-repeat — определяет, как будет повторяться фоновый рисунок.

Background-repeat

repeat

Весь фон страницы будет заполнен фоновым рисунком. Если при этом задать background-position, то повтор будет осуществляться с указанной позиции. Значение по умолчанию.

no-repeat

Фоновое изображение не будет повторяться.

repeat-x

Фоновый рисунок повторяется от левого до правого края веб-страницы по верхнему краю страницы.

repeat-y

Фоновый рисунок повторяется от верхнего до нижнего края веб-страницы по левому краю страницы.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-repeat: no-repeat;

}

Позиционирование фоновых изображений background-position

background-position — свойство управляет точным расположением фонового изображения.

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

Значение по умолчанию background-position: 0% 0%.

Background-position

left top, center top, right bottom, Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center. Px, em или % Указывается два значения: 1. Первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера; 2. Второе указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера. Процентное значение рассчитывается относительно самого изображения и относительно элемента-контейнера. Например, при задании background-position: 50% 50%; центр изображения совпадет с центром элемента-контейнера. Можно задавать расположение в px, em или % одновременно. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-position: center center;

}

Можно задать фон так, чтобы изображение располагалось только по низу блока:

div {

background-position: left bottom;

background-repeat: repeat-x;

}

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

div {

width: 660px;

background-color: #E0E4EF;

height: 300px;

url(../images/flower221.png);

background-repeat: repeat-x;

background-position: 0 250px, 0 150px, 0 98px;

}

Background-attachment

scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. local Фоновое изображение прокручивается вместе с содержимым элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-attachment: fixed;

}

Background-clip

border-box Фон растягивается до внешнего края границы элемента. Значение по умолчанию. padding-box Фон простирается до внешнего края отступов элемента. content-box Фон окрашивает только содержимое элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-clip: border-box;

}

Background-origin

padding-box Положение элемента вычисляется относительно верхнего левого угла с внутренней стороны границы элемента. border-box Положение элемента вычисляется относительно верхнего левого угла с внешней стороны границы элемента. content-box Положение элемента вычисляется относительно верхнего левого угла содержимого. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-origin: padding-box;

}

Background-size

auto Высота и ширина изображения равны его оригинальным размерам. px / em / rem Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em. % Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-size: 300px 150px;

}

Задание фона элемента одним свойством background

background —позволяет описать в одном объявлении следующие свойства: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.

Как пишется в коде:

body {

background: #00ff00 url(" smiley.gif" ) no-repeat fixed center;

}

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

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

Как пишется в коде:

div {

background-repeat: no-repeat;

background-position: bottom right, center center, top left;

}

Изображения нужно перечислять в порядке наложения, самое верхнее изображение должно быть первым, а самое большое, расположенное на заднем плане — последним.

Комбинация градиента и фонового изображения

За счёт комбинации градиента и изображения можно создавать интересные эффекты.

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

Как пишется в коде:

div {

height: 453px;

background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(photo-8.jpg);

background-size: cover;

}

Дополнительные CSS свойства для работы с тегом < img >

Существую CSS-свойства, которые используют изображения для создания фона элементов, создания рамок и масок «слоев», а также вырезки частей изображения. Однако, существуют другие свойства, которые используются не так часто и применяются непосредственно к изображениям (тегу < img> ).

Использование тега < img > является наиболее предпочтительными способом размещения изображений на страницах.

Послание № 11

Картинки

Фоновое изображение background-image

background-image — устанавливает изображение в качестве фона для элемента.

Фоновым изображением может быть картинка или градиент.

Как пишется в коде:

div {

}

12 3 Следующая ⇒