Свойство background-attachment [6/16]
Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.
С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.
Значение свойства:
scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.
fixed — фон не прокручивается, зафиксирован на одном месте.
Это тот случай, когда легче показать, чем объяснять: выполняйте задание и смотрите, как изменяется поведение фона при прокрутке.
Файл css48.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Свойство background-attachment</title>
<style>
body {
background-color: black;
background-image: url("https://htmlacademy.ru/assets/course13/moon.jpg");
background-position: 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;/*!!!!!!!!!!!!!!!!!!!!!!*/
}
.block {
width: 192px;
height: 256px;
margin: 20px auto;
background-color: #34495e;
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 5px;
}
.block:nth-child(1) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_clean.png");
}
.block:nth-child(2) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_fight.png");
}
.block:nth-child(3) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_hiss.png");
}
.block:nth-child(4) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");
}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</body>
</html>
Курс «Фоны, часть 1» Свойство background [7/16]
Фон элемента можно задавать с помощью отдельных свойств: background-color,background-image и т.д. Получается довольно громоздкая запись.
Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:
background: [bc] [bi] [br] [bp] [ba];
/* Обозначения:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/
Если какой-то компонент не указан, то берется значение по умолчанию. Ниже примеры.
background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;
В первом примере просто задан цвет фона.
Во втором примере задано не повторяющееся фоновое изображение, а также по умолчанию прозрачный цвет фона, расположение в левом верхнем углу.
В третьем примере задано фоновое изображение и его расположение, а также по умолчанию прозрачный цвет фона и режим повторения во все стороны.
Файл css49.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Свойство background</title>
<style>
body {
padding: 20px;
font-size: 20px;
font-family: "Tahoma", sans-serif;
}
.block {
width: 140px;
margin: 25px auto;
padding: 25px 0;
padding-left: 90px;
color: white;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background: none;
background-color: #e74c3c;
background-image: url("https://htmlacademy.ru/assets/course13/cat_eyes.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}
.block2 {
background: none;
background-color: #2980b9;
background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}
</style>
</head>
<body>
<div class="block block1">
Гипнокот
</div>
<div class="block block2">
Рыбокот
</div>
</body>
</html>
Файл css50.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: котокомикс</title>
<style>
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;
font-size: 0;
text-align: center;
background: white;
}
.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;
background-color: black;
}
.block1 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block2 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-color: #f1c40f;
background-position: 50% 50%;
}
.block3 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_hiss.png");
background-repeat: no-repeat;
background-color: #e74c3c;
background-position: 50% 50%;
}
.block4 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-color: #3498db;
background-position: 60px 50%;
}
.block5 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-color: #3498db;
background-position:30px 50%;
}
.block6 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_slippers.png");
background-repeat: no-repeat;
background-color: #27ae60;
background-position: 50% 50%;
}
.block7 {
background-color: #bdc3c7;
}
.block8 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_grumpy.png");
background-repeat: no-repeat;
background-color: #95a5a6;
background-position: 40px 50%;
}
.block9 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_grumpy.png");
background-repeat: no-repeat;
background-color: #bdc3c7;
background-position:50px 50%;
}
/*
Используемые изображения:
/assets/course13/cat_poo.png
/assets/course13/cat_hiss.png
/assets/course13/cat_walk.png
/assets/course13/cat_slippers.png
/assets/course13/cat_grumpy.png
*/
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
<div class="block block5"></div>
<div class="block block6"></div>
<div class="block block7"></div>
<div class="block block8"></div>
<div class="block block9"></div>
</body>
</html>
/* вариант*/
<!--style>
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;
font-size: 0;
text-align: center;
background: white;
}
.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;
background-color: black;
}
.block1 {
background: #000000 url(/assets/course13/cat_poo.png) no-repeat center center;
}
.block2 {
background: #f1c40f url(/assets/course13/cat_poo.png) no-repeat center center;
}
.block3 {
background: #e74c3c url(/assets/course13/cat_hiss.png) no-repeat center center;
}
.block4 {
background: #3498db url(/assets/course13/cat_walk.png) no-repeat 230% center;
}
.block5 {
background: #3498db url(/assets/course13/cat_walk.png) no-repeat100% center;
}
.block6 {
background: #27ae60 url(/assets/course13/cat_slippers.png) no-repeat center center;
}
.block7 {
background: #bdc3c7
}
.block8 {
background: #95a5a6 url(/assets/course13/cat_grumpy.png) no-repeat 150% center
}
.block9 {
background: #bdc3c7 url(/assets/course13/cat_grumpy.png) no-repeat190% center
}
</style-->
Курс «Фоны, часть 1»