Котомикс

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

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 60px;
}

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

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

.block7 {
background: #bdc3c7;
}

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

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

В блоке 8 значение [bp] списала, не могла подобрать в %. Напишите, пожалуйста, если кто-то подобрал в %. И мнение по поводу остального тоже интересно. Спасибо:)

#2

Мое первоначальное решение ниже. Я когда понял, что в .block8 по горизонтали не подлезть с %, остановился на 41px, чтобы сэкономить время.
Теперь, увидев этот топик, решил вернуться. Подобрал. Если очень нужны % для .block8, то вот “157.7% 50%;” :grin:

Интересно, что если уменьшать кратно 0.1% от 157.7% (и проверять после каждого изменения), то до 157.4% результат 100%.
А если набрать сначала 157.4%, то до 157.5% будет 99.9%, а с 157.6% уже 100%.
Возможно, это еще зависит от браузера.
Надеюсь, что придал спокойствия :wink:


.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 60px 50%;}
.block5 {background: #3498db url('cat_walk.png') no-repeat -30px 50%;}
.block6 {background: #27ae60 url('cat_slippers.png') no-repeat 50% 50%;}
.block7 {background: #bdc3c7;}
.block8 {background: #95a5a6 url('cat_grumpy.png') no-repeat 41px 50%;}
.block9 {background: #bdc3c7 url('cat_grumpy.png') no-repeat -50px 50%;}
#3

Вот, что получилось с процентами
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.8% 50%;
}
.block5 {
background: #3498db url(“cat_walk.png”) no-repeat -115.6% 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.7% 50%;
}
.block9 {
background: #bdc3c7 url(“cat_grumpy.png”) no-repeat -192.3% 50%;
}

#4

Воспользовалась подсказкой про 157.7% в block8 и удалось подобрать

1 симпатия
#5

ВОТ МОЙ КОД НА 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 60px;
}
.block5{
background:#3498db url(“cat_walk.png”) no-repeat -30px ;
}
.block6{
background:#27ae60 url(“cat_slippers.png”) no-repeat center;
}
.block7{
background:#bdc3c7 url("") no-repeat ;
}
.block8{
background:#95a5a6 url(“cat_grumpy.png”) no-repeat 41px 13px;
}
.block9{
background:#bdc3c7 url(“cat_grumpy.png”) no-repeat -50px;