Несколько фонов [13/16]

Курсы §12. Фоны
1

ПОдскажите где ошибка? :frowning:

.block1 {

width: 256px;
margin: 0 auto;
box-shadow: 1px 1px 3px #999;
background-image: url("/assets/course13/cows.jpg") no-repeat

}

.block2 { background: url(/assets/course13/cat_walk.png) no-repeat 190px 195px

}

.block3 {background: url(/assets/course13/fence.png) no-repeat
height: 256px;
}

2

Блок 1. Background-image изменить на background, ибо no-repeat просто быть не может в background-image.

В конце каждого свойства нельзя забывать его закрывать точкой с запятой.

И уж адрес надо заключать в кавычки везде, а не только в одном месте.

2 лайка
3

Не пойму, зачем везде нужен no-repeat?

13-16.png1920×1080 266 KB

4

Потому что, если бы блок был шире, то картинки бы начинали повторяться. А зачем нам лишнее повторение? )

5

OK, спасибо!

6

Я не понимаю, создаются 3 блока, коровы кот и забор, расположение коров мне понятно, расположение кота понятно тоже, мы его просто задаем, но мне не понятно почему забор внизу появляется, если прописать кота без параметров расположения то он появляется в верхнем левом углу, у забора таких параметров нет и он почему то внизу

7

Дело в том, что размеры картинки с забором 256 на 256px, что совпадает с размером блока 1.

8

то есть там у забора прозрачность? почти на верхнюю половину экрана?

9

Да, именно так.

1 лайк
10

А зачем указывать no-repeat для первого и третьего элементов?

11

Вот правильный код

body {
padding-top: 80px;
}

.block1 {
width: 256px;
margin: 0 auto;
box-shadow: 1px 1px 3px #999999;
background: url("/assets/course13/cows.jpg") no-repeat;
}

.block2 {
background: url("/assets/course13/cat_walk.png") no-repeat 190px 195px;

}

.block3 {
height: 256px;
background: url("/assets/course13/fence.png") no-repeat;
}

12

Чтобы картинка не повторялась!