Как установить задний фон в css

Задание фона с помощью CSS свойства Background

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

Изменение фонового цвета блока с помощью CSS свойства background-color

Мы можем устанавливать цвет фона с помощью всех доступных цветовых схем CSS

Задание фонового изображения с помощью CSS свойства background-image

CSS свойство background-image, позволяет нам установить фоновое изображение, например использовать в качестве изображения картинку, расположенную по заданному url адресу

Повторение фонового изображения с помощью CSS свойства background-repeat

Данное свойство позволяет размножить изображение маленького размера по всему размеру блока методом дублирования изображения по оси x и y. По умолчанию, это свойство установлено в значение repeat, и повторяется по обоим осям, это первое что пугает начинающего верстальщика — вы хотели установить маленький логотип в углу экрана, а в результате он продубливался по всему блоку.

Вот список значений , которые может принимать свойство background-repeat:

  • repeat. Изображение дублируется по всем осям.
  • no-repeat. Картинка не дублируется (здесь ваше спасение)
  • repeat-x. Повторяется только по горизонтали
  • repeat-y. Только по вертикали

Расположение фона с помощью CSS свойства background-position

С помощью этого свойства, вы можете определить, в каком конкретном месте хотите расположить фоновое изображение. Оно может принимать значения как в пикселях и процентах, так и вспомогательные конструкции center, left, right, top, bottom

Несколько фоновых изображений в одном блоке

CSS3 дает нам возможность устанавливать сразу несколько фоновых изображений для одного элемента, для этого достаточно перечислить их через запятую и воспользоваться свойствами background-position и background-repeat, которые были описаны выше, для того, чтобы настроить их расположение

Задание разера фонового изображения в CSS

Для того, чтобы задать размер фонового изображения установленного с помощью свойства background-image, необходимо воспользоваться CSS свойством background-size и установить нужный размер изображения

Также, свойство background-size, может принимать значения:

  • contain. — Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
  • cover — Тоже самое, но масштабирует по наименьшей из сторон

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

fixed. — Изображение не прокручивается

local — Изображение прокручивается с контентом, но не с элементом, его содержащим

scroll — Изображение прокручивается с элементом, его содержащим

Использование градиента в качестве фонового изображения

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

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

  • CSS3 линейные градиенты (ссылка появится позже)
  • CSS3 радиальные градиенты (ссылка появится позже)
  1. Писать каждую пару свойств и его значение

Либо воспользоваться краткой записью

Как видите, второй способ займет у вас меньше места и сократит время его написания, да и браузер подгрузит такой код быстрее.

Превью Задание фона с помощью CSS свойства Background2015-11-22 2015-11-22 Задание фона с помощью CSS свойства Background Александр Сажин

Данный материал был вам полезен?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *