Свойства фона в CSS — background

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

Значения background:

• background-color — значение цвета фона.
• background-image — значение фонового изображения.
• background-repeat — значение повторения фонового изображения.
• background-attachment — значение фиксации фонового изображения.
• background-position — значение положения фонового изображения.

  background-color

Свойство background-color устанавливает фоновый цвет элемента

Свойство background-color имеет три значения:
transparent делает фон прозрачным
inherit наследует цвет фона родителя

Пример написания стиля background-color

Пример выполненного кода с применением свойства стиля background-color

Пример написания стиля background-color

background-image

Свойство background-image устанавливает фоновое изображение и его цикличность

Свойство background-image имеет значения:
url ('...файл...') ссылка на изображение
none нет фонового изображения
inherit значение родительского элемента

Пример написания стиля background-image

Пример картинки, выбранной для фона

Пример выполненного кода с применением свойства стиля background-image

Примером будет являться вот этот текст, в котором используется background-image. Фоновая картинка  background2.png  будет повторяться, пока не закончится текст.

background-repeat

Свойство background-repeat устанавливает, как будет повторяться фоновое изображение background-image. Повторение в горизонтальной плоскости, вертикальной или в обоих направлениях.

Свойство background-repeat имеет три значения:

no-repeat - фоновое изображение элемента не повторяется, определяется или положением в верхнем левом углу или свойством background-position.
repeat - повторение изображения одновременно в 2-х плоскостях, горизонтально и вертикально
repeat-x - повторение изображения по горизонтали
repeat-y - повторение изображения в вертикальной плоскости
inherit - наследует родительское значение

background-attachment

Свойство CSS background-attachment устанавливает, будет ли фоновое изображение зафиксировано и оставаться неподвижным или перемещаться совместно с содержимым.

Свойство background-attachment имеет три значения:

fixed - фоновое изображение элемента остается неподвижным
scroll - фон перемещается вместе с содержимым
inherit - наследуется значение свойства родительского элемента

Пример написания стиля background-attachment

background-position

Свойство background-position устанавливает положение картинки фона и присваивается несколько значений расположения по горизонтали и по вертикали.

По горизонтали значение background-position может быть
left
center
right

По вертикали значение background-position может быть
top
center
bottom

Пример написания стиля background-position

Расположение фонового рисунка относительно контейнера

• 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% (в правом нижнем углу)

Возможен ли заработок в инете без вложений ? Возможен. Всё зависит от того, как Вы подойдёте к данному воросу и какие способы заработка выберите.

Рекомендую:

1. CSS Свойства — color (цвет)
2. Свойства шрифта в CSS
3. Подключение CSS к HTML
4. Продвижение изображений в ТОП выдачи поисковых систем
5. Синтаксис CSS: правила и селекторы CSS
6. Что такое CSS и преимущества CSS
7. Псевдоэлементы и псевдоклассы CSS
8. 60 буржуйских каталогов для ссылок и статей

Оставить комментарий или два