8 задание

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

Не пойму как правильно выровнять котов.

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 50% 50%;
}

.block2{
background:#f1c40f url("/assets/course13/cat_poo.png") no-repeat 50% 50%;
}

.block3{
background:#e74c3c url("/assets/course13/cat_hiss.png") no-repeat 50% 50%;
}

.block4{
background:#3498db url("/assets/course13/cat_walk.png") no-repeat 230% 50%;
}

.block5{
background:#3498db url("/assets/course13/cat_walk.png") no-repeat -120% 50%;
}

.block6{
background:#27ae60 url("/assets/course13/cat_slippers.png") no-repeat 50% 50%;
}

.block7{
background:#bdc3c7;
}

.block8{
background:#95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 155% 50%;
}

.block9{
background:#bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -195% 50%;
}

2

Попробуйте выровнять с помощью пикселей, а не %.

1 лайк
3

157% 50%
-193% 50%

1 лайк
4

.block1 {
background-color: #000000;
background-image: url("/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-position: center;
}

.block2 {
background-color: #f1c40f;
background-image: url("/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-position: center;
}

.block3 {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_hiss.png");
background-repeat: no-repeat;
background-position: center;
}

.block4 {
background-color: #3498db;
background-image: url("/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-position: 230% 50%;
}

.block5 {
background-color: #3498db;
background-image: url("/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-position: -115% 50%;
}

.block6 {
background-color: #27ae60;
background-image: url("/assets/course13/cat_slippers.png");
background-repeat: no-repeat;
background-position: center;
}

.block7 {
background-color: #bdc3c7;
}

.block8 {
background-color: #95a5a6;
background-image: url("/assets/course13/cat_grumpy.png");
background-repeat: no-repeat;
background-position: 157% 50%;
}

.block9 {
background-color: #bdc3c7;
background-image: url("/assets/course13/cat_grumpy.png");
background-repeat: no-repeat;
background-position: -192% 50%;
}

Безымянный.jpg1187×772 149 KB

5

Вот мой вариант на 100%. Для измерения использовал линейку, называется mySize.
.block1 {
background: #000000 url("/assets/course13/cat_poo.png") no-repeat 50% 50%;
}

.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;
}

.block4 {
background: #3498db url("/assets/course13/cat_walk.png") no-repeat 60px center;
}

.block5 {
background: #3498db url("/assets/course13/cat_walk.png") no-repeat -30px 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 41px center;
}

.block9 {
background: #bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -50px center;
}

6

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: black url("/assets/course13/cat_poo.png") no-repeat 50% 50%;
}
.block2 {
background: #f1c40f url("/assets/course13/cat_poo.png") no-repeat 50% 50%;
}
.block3 {
background: #e74c3c url("/assets/course13/cat_hiss.png") no-repeat 50% 50%;
}
.block4 {
background: #3498db url("/assets/course13/cat_walk.png") no-repeat 230% 50%;
}
.block5 {
background: #3498db url("/assets/course13/cat_walk.png") no-repeat -115% 50%;
}
.block6 {
background: #27ae60 url("/assets/course13/cat_slippers.png") no-repeat 50% 50%;
}
.block7 {
background: #bdc3c7;
}
.block8 {
background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 158% 50%;;
}
.block9 {
background: #bdc3c7 url("/assets/course13/cat_grumpy.png")
no-repeat -192% 50%;;
}