Фоны, часть 1 / Испытание: котокомикс [8/16]

Курсы §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 13px 13px;
}

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

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

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

.block5 {
background: #3498db url("/assets/course13/cat_walk.png") no-repeat -30px 13px;
}

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

.block7 {
background-color: #bdc3c7;
}

.block8 {
background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 41px 13px;
}

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

Версия других которых я почитал на форуме.

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;
background-repeat: no-repeat;
}

.block1,
.block2,
.block3,
.block6 {background-position: center;}

.block1,
.block2 {
background-image: url(‘https://htmlacademy.ru/assets/course13/cat_poo.png’);
}

.block2 {
background-color: #f1c40f;
}

.block3 {
background-color: #e74c3c;
background-image: url(‘https://htmlacademy.ru/assets/course13/cat_hiss.png’);
}

.block4,
.block5 {
background-color: #3498db;
background-image: url(‘https://htmlacademy.ru/assets/course13/cat_walk.png’);
}

.block4 {background-position: 60px center;}
.block5 {background-position: -30px center;}

.block6 {
background-color: #27ae60;
background-image: url(‘https://htmlacademy.ru/assets/course13/cat_slippers.png’);
}

.block7,
.block9 {
background-color: #bdc3c7;
}

.block8,
.block9 {background-image: url(‘https://htmlacademy.ru/assets/course13/cat_grumpy.png’);}

.block8 {
background-color: #95a5a6;
background-position: 41px center;
}

.block9 {
background-position: -50px center ;
}
Спасибо за ответы.

2

Вполне правильно.
Я, например тоже предпочитаю такой вариант как у Вас – все свойства картинки в одном месте.
Во втором варианте не сразу понятно какие координаты какой картинке соответствуют…

Картинкам, которые явно находятся в центре 
.block1 {
    background: #000000 url("/assets/course13/cat_poo.png") no-repeat 13px 13px;
}

удобнее присваивать %

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

Я понял, спасибо:blush:
Немного нервничал, что не так делаю. А за совет отдельное спасибо!

4

Народ, подскажите пожалуйста откуда берутся цифры в пикселях? Их надо же как то вычислять. Я задаю позицию словами право, лево , центр

5

А зачем пиксели, когда есть проценты? Более того, “резиновая” вёрстка хороша собой во всех параметрах. Адаптивность при вёрстке на экраны будем подгонять же ж именно %, vw, vh и em.
На мой взгляд, здесь процентам самое то! И просто, и коротко, и со вкусом!.. =]

`
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;

background-color: black;
}

.block.block1 {background: #000000 url(“cat_poo.png”) no-repeat 50% 50%;}
.block.block2 {background: #f1c40f url(“cat_poo.png”) no-repeat 50% 50%;}
.block.block3 {background: #e74c3c url(“cat_hiss.png”) no-repeat 50% 50%;}
.block.block4 {background: #3498db url(“cat_walk.png”) no-repeat 230% 50%;}
.block.block5 {background: #3498db url(“cat_walk.png”) no-repeat -115% 50%;}
.block.block6 {background: #27ae60 url(“cat_slippers.png”) no-repeat 50% 50%;}
.block.block7 {background: #bdc3c7;}
.block.block8 {background: #95a5a6 url(“cat_grumpy.png”) no-repeat 156% 50%;}
.block.block9 {background: #bdc3c7 url(“cat_grumpy.png”) no-repeat -194% 50%;}
`

1 лайк
6

body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;

background-color: black;
}
.block1 {
background:url(“cat_poo.png”) #000000 no-repeat center;
}
.block2{
background:url(“cat_poo.png”) #f1c40f no-repeat center;
}
.block3{
background:url(“cat_hiss.png”) #e74c3c no-repeat center;
}
.block4
{
background:url(“cat_walk.png”) #3498db no-repeat 230% 50% ;
}
.block5{
background:url(“cat_walk.png”) #3498db no-repeat -115% 50%;
}
.block6{
background:url(“cat_slippers.png”) #27ae60 no-repeat center;
}
.block7{
background: #bdc3c7;
}
.block8{
background:url(“cat_grumpy.png”) #95a5a6 no-repeat 156% 50%;
}
.block9{
background:url(“cat_grumpy.png”) #bdc3c7 no-repeat -194% 50%;
}

7

100% Чему я очень рад!!! )))) сложность в подгонке процентов, методом тыка)
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;

background-color: black;
}
.block1 {
background: #000000 url(“cat_poo.png”) no-repeat center;
}
.block2 {
background: #f1c40f url(“cat_poo.png”) no-repeat center;
}
.block3 {
background: #e74c3c url(“cat_hiss.png”) no-repeat center;
}
.block4 {
background: #3498db url(“cat_walk.png”) no-repeat 232% center;
}
.block5 {
background: #3498db url(“cat_walk.png”) no-repeat -116% center;
}
.block6 {
background: #27ae60 url(“cat_slippers.png”) no-repeat center;
}
.block7 {
background:#bdc3c7}
.block8 {
background:#95a5a6 url(“cat_grumpy.png”) no-repeat 156% center }
.block9 {
background:#bdc3c7 url(“cat_grumpy.png”) no-repeat -193% center}
/*
Используемые изображения:
cat_poo.png
cat_hiss.png
cat_walk.png
cat_slippers.png
cat_grumpy.png
*/

8

100%

.block1 {
background: #000000 url(“cat_poo.png”) no-repeat center;
}

.block2 {
background: #f1c40f url(“cat_poo.png”) no-repeat center;
}

.block3 {
background: #e74c3c url(“cat_hiss.png”) no-repeat center;
}

.block4 {
background: #3498db url(“cat_walk.png”) no-repeat center left 60px;
}

.block5 {
background: #3498db url(“cat_walk.png”) no-repeat center right 56px;
}

.block6 {
background: #27ae60 url(“cat_slippers.png”) no-repeat center;
}

.block7 {
background: #bdc3c7;
}

.block8 {
background: #95a5a6 url(“cat_grumpy.png”) no-repeat center left 41px;
}

.block9 {
background: #bdc3c7 url(“cat_grumpy.png”) no-repeat center right 76px;
}

10

body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;

background-color: black;
}
.block1 {
background:#000000 url(“cat_poo.png”) no-repeat 50% 50%;
}
.block2 {
background:#f1c40f url(“cat_poo.png”) no-repeat 50% 50%;
}
.block3 {
background:#e74c3c url(“cat_hiss.png”) no-repeat 50% 50%;
}
.block4 {
background:#3498db url(“cat_walk.png”) no-repeat 230% 50%;
}
.block5 {
background:#3498db url(“cat_walk.png”) no-repeat -115% 50%;
}
.block6 {
background:#27ae60 url(“cat_slippers.png”) no-repeat 50% 50%;
}
.block7 {
background:#bdc3c7;
}
.block8 {
background:#95a5a6 url(“cat_grumpy.png”) no-repeat 157% 50%;
}
.block9 {
background:#bdc3c7 url(“cat_grumpy.png”) no-repeat -193% 50%;
}

Сколько бы не менял %, выходит 99%(((

12

body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;

background-color: black;
}
.block1 {
background: #000000 url(“cat_poo.png”) no-repeat 13px;
}
.block2 {
background: #f1c40f url(“cat_poo.png”) no-repeat 13px;
}
.block3 {
background: #e74c3c url(“cat_hiss.png”) no-repeat 13px;
}
.block4 {
background: #3498db url(“cat_walk.png”) no-repeat 60px;
}
.block5 {
background: #3498db url(“cat_walk.png”) no-repeat -30px;
}
.block6 {
background: #27ae60 url(“cat_slippers.png”) no-repeat 13px;
}
.block7 {
background: #bdc3c7;
}
.block8 {
background: #95a5a6 url(“cat_grumpy.png”) no-repeat 41px;
}
.block9 {
background: #bdc3c7 url(“cat_grumpy.png”) no-repeat -50px;
}

13

То же самое, даже пробовал подобрать десятичные доли %, всё тщетно, максимум 99.6%

body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;

background-color: black;
}

.block1 {
background:#000000 url(cat_poo.png) no-repeat center;
}
.block2{
background: #f1c40f url(cat_poo.png) no-repeat center;
}
.block3{
background: #e74c3c url(cat_hiss.png) no-repeat center;
}
.block4
{
background: #3498db url(cat_walk.png) no-repeat 230% 50% ;
}
.block5{
background:#3498db url(cat_walk.png) no-repeat -115% 50%;
}
.block6{
background:#27ae60 url(cat_slippers.png) no-repeat center;
}
.block7{
background: #bdc3c7;
}
.block8{
background: #95a5a6 url(cat_grumpy.png) no-repeat 156% 50%;
}
.block9{
background:#bdc3c7 url(cat_grumpy.png) no-repeat -194% 50%;
}

14

у меня 100% с другими %

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: #000 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 232% 50%;
}
.block5{
background: #3498db url("/assets/course13/cat_walk.png") no-repeat -117% 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 159% 50%;
}
.block9{
background: #bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -191% 50%;
}