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


#1

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


Свойство background-attachment [6/16]
#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

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


#16

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