background
Каждый элемент имеет background ( фоновый слой ), который может быть прозрачным (по умолчанию), цветной заливкой и изображением
В качестве изображения может выступать градиент или картинка
Для одного элемента можно задать несколько фоновых изображений
| Название атрибута | comment |
|---|---|
background-color |
устанавливает цветную заливку для любого HTML-элемента. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого |
background-image |
устанавливает изображение в качестве фона для элемента. Фоновым изображением может быть картинка или градиент |
background-repeat |
определяет, каким образом будет повторяться фоновый рисунок |
background-position |
управляет точным расположением фонового изображения. Можно определить начальную позицию фонового изображения в виде горизонтальной и вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений |
background-size |
позволяет масштабировать фоновое изображение по вертикали и горизонтали ( background-image ). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте |
background-attachment |
imagebody { margin: 0; }
div {
width: 50vw;
height: 50vh;
margin: 5vh 25vw;
}
.back-picture {
background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/1C41/production/_104133270_78bd83b4-ec17-4ce1-be30-07dc58cc0f6d.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}<body>
<div class="back-picture"></div>
</body>
body {
margin: 0;
background-image: url(https://s3-production.bobvila.com/articles/wp-content/uploads/2016/10/popcorn-ceiling1.jpg);
background-repeat: repeat;
background-size: 30%;
}
div {
width: 50vw;
height: 50vh;
margin: 5vh 25vw;
}
.back-picture {
background-image: url(https://www.tripwiremagazine.com/wp-content/uploads/2014/02/ice-textures-featured.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}<body>
<div class="back-picture"></div>
</body>
gradient|
Для старых браузеров, не поддерживающих градиент, ставьте обычную заливку body {
background: #059;
}Если вы очень любите вендорные префиксы хотите уважить старые версии мозиллы ( до 15-ой включительно ) - пожал-ста: body {
background: -moz-linear-gradient(top, #059 0%, #5bf 40%, #f90 100%);для Chrome с 10-го по 25-ый и Safari с 5-го по 6-ой body {
background: -webkit-linear-gradient(top, #059 0%, #5bf 40%, #f90 100%);и совсем уже извращенцам - для очень древних ишаков ( с 6-го по 9-ый ) body {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#059', endColorstr='#f90', GradientType=0 );
}
body {
background: linear-gradient(to bottom, #059 0%,#5bf 40%, #f90 100%);
}Теперь посмотрите в окошко, и увидите результат |
Нормально: для ишака 10+, мозиллы 16+, Chrome 26+, Opera 12+, Safari 7+
Советую воспользоваться услугами 
генератора градиента
Сначала зададим градиентную заливку для страницы:
body {
background: linear-gradient(to bottom, #059 0%, #5bf 40%, #f80 100%);
font-family: Arial;
font-size: 16px;
margin: 0;
}Теперь сделаем класс для текста с фоновой картинкой:
.text {
font-size: 15em;
font-weight: bold;
text-align: center;
background: url(http://metagrid2.sv.vt.edu/~chris582/textures/crystal.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}Опишем круглую фигуру, расположенную горизонтально по центру:
figure {
width: 200px;
height: 200px;
margin-left: calc(50% - 100px);
border-radius: 50%;
box-sizing: border-box;
}Здесь мы использовали функцию calc
50% - это половина ширины viewport
100px - это половина ширины фигуры
Теперь опишем класс элемента с фоновой картинкой:
.ellipse {
background-image: url(https://i.pinimg.com/originals/bf/fe/de/bffede1d81ebe6ddb2eb3033dc86ac68.gif);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}Осталось вставить соответствующие элементы в документ:
<body>
<div class="text">SPACE</div>
<figure class="ellipse"></figure>
</body>
Обратите внимание, что фон внутри текста и внутри фигуры прокручивается при скроллинге страницы
Это происходит потому, что для атрибута background-attachment установлено значение fixed
т.е. элементы прокручиваются, а фон - нет
Если для атрибута background-attachment установить значение local, то при прокрутке страницы фон внутри элемента будет прокручиваться вместе с элементом
Всемирная паутина
Пример
Flexbox Froggy
