Фоны / Свойство background-attachment [6/16]

Курсы Ошибки в курсах
1

Когда прокручиваеш страницу, фотографии прокручиваются.

2

Фотографии прокручиваются. Всё правильно. В этом задании свойство применяется к фону страницы, который под фотографиями.

4

не у меня фотографии не прокручиваются

5

я запутался

6

Свойство background-attachment применено к фоновому изображению страницы. Если его значение scroll, то фон прокручивается вместе с картинками с котиками, если fixed, то прокручиваются только картинки, фон стоит на месте.

7

Но почему-то фоновая картинка скроллится когда пишешь в body:

background-attachment: fixed;

Ведь она должна быть неподвижной?

8

Должна быть неподвижной.
Отправьте css-код полностью, возможно у вас есть ошибка.

10

body {
background-color: black;
background-image: url("/assets/course13/moon.jpg");
background-position: 50% 0;
background-repeat: no-repeat;
}

.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("/assets/course13/cat_clean.png");
}

.block:nth-child(2) {
background-image: url("/assets/course13/cat_fight.png");
}

.block:nth-child(3) {
background-image: url("/assets/course13/cat_hiss.png");
}

.block:nth-child(4) {
background-image: url("/assets/course13/cat_poo.png");
}

11

Но здесь же не использовано свойство background-attachment: fixed;

12

Извините, я неправильно просто скопировала, вот такой код у меня:

body {
background-color: black;
background-image: url("/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("/assets/course13/cat_clean.png");
}

.block:nth-child(2) {
background-image: url("/assets/course13/cat_fight.png");
}

.block:nth-child(3) {
background-image: url("/assets/course13/cat_hiss.png");
}

.block:nth-child(4) {
background-image: url("/assets/course13/cat_poo.png");
}

13

Здесь всё правильно. При таком коде фоновое изображение на заднем плане не скроллится.

14

Просто у меня картинка с луной сначала вверху, а при скролле она оказывается внизу.

15

Не понимаю, как такое возможно. Напишите версию системы и браузера, в котором проходите задание. Можете проверить код в другом доступном браузере.

1 лайк
16

Windows 10, браузер Google Chrome. Проверила сейчас в мозилле, там правильно работает.