CSS фон

CSS фон

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

Содержание статьи:

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

Немного теории

Сокращенная запись

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

Развернутая запись

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

Список параметров

  • background-color- цвет фона
  • background-image- картинка задается как параметр для функции url имеет вот такой вид url('картинка')
  • background-position - позиция фона. Состоит из двух значений: первый - позиция по горизонтали от левого края; второй - позиция по вертикалиот верхнего края
  • background-repeat - повторение фона: repeat-x – по оси x; repeat-y – по оси y; no-repeat – вообще не будет повторяться.
  • background-attachment - поведение фона при скролле. fixed - фон неподвижен; scroll - прокручивает фон вместе со скроллом; inherit - наследует значение родителя; local - фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
  • background-size - размер фона. auto - размеры фона остаются исходными; cover - фон масштабируется по размеру контейнера, пустых мест не остается; contain - масштабирует фон с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Живой пример

css
1
2
3
4
5
6
7
8
9
div {
width: 600px;
height: 600px;
background-color: #000;
background-image: url ('https://codedojo.ru/img/codedojo-big-white.png')
background-size: auto;
background-repeat: no-repeat;
background-position: center center;
}

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

Заключение

Если статья была Вам полезна поделитесб ей в социальных сетях.