В задании сказано, что задачу можно решить двумя способами.
Я выбрал второй т.е с использованием множественных фоновых изображений. На мой взгляд используя этот вариант решения получается более короткий код. Так же в задании сказано, что адреса картинок и небольшая подсказка есть в комментариях в CSS-коде. Небольшая подсказка (помимо той, что все координаты кратны либо 5, либо 10), - это порядок наложений изображений, именно в таком порядке как указаны адреса картинок и нужно писать CSS-свойства для background.
Итак приступим. В HTML-кода мы видим контейнер div с классом block - это наш синий прямоугольник. Внутри него находится еще один контейнер с классом bg, именно для него мы и будем применять множественные фоновые изображения. Вначале может показаться, что лучше всего начать с позиционирования звездочек, нежели с котиков, но это не так. Нужно определить какое изображение находится поверх всех остальных, его и нужно позиционировать первым.
Для этого достаточно воспользоваться подсказкой. Первой в списке адресов изображений идет картинка котика с рыбкой:
Адреса картинок:
> /assets/course13/cat_fish_128.png - нужно позиционировать первой, а дальше по списку вниз.
/assets/course13/cat_grumpy_128.png
/assets/course13/cat_drunk_128.png
/assets/course13/cat_walk_128.png
/assets/course13/cat_academy.png
/assets/course13/star.png
Мой вариант решения:
.bg {
height: 300px;
background:
url("/assets/course13/cat_fish_128.png") no-repeat 90px 145px,
url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 125px,
url("/assets/course13/cat_drunk_128.png") no-repeat 160px 125px,
url("/assets/course13/cat_walk_128.png") no-repeat 80px 80px,
url("/assets/course13/cat_academy.png") no-repeat 20px 20px,
url("/assets/course13/star.png") repeat-x 0 10px,
url("/assets/course13/star.png") repeat-x 0 270px;
}
Для решения данной задачи не нужно позиционировать с помощью %. Это не правильно. Используя такой подход, Вы никогда не сможете верстать pixel perfect, никогда не сможете точно позиционировать элементы. Для точного позиционирования используйте px, либо гриду (сетку), а % лучше всего использовать тогда, когда вам нужно разместить какой-то элемент строго по центру, либо разместить элемент на расстоянии относительно другого элемента размещение которого тоже задано в % относительно родители.