Фоны / Испытание: CAT Academy [16/16]

100%
html, body {
margin: 0;
padding: 0;
}

.block {
width: 300px;
height: 300px;
background: #3498db;
}

.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 80.5px,
url(/assets/course13/cat_academy.png) no-repeat 20px 20px,
url(/assets/course13/star.png) repeat-x 0px 270px,
url(/assets/course13/star.png) repeat-x 0px 10px;
}

2 лайка

Всем привет
А вот и моя писанина на 100% :slight_smile:

}
.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 -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 157% 50%;
}
.block9 {
background: #bdc3c7 url(/assets/course13/cat_grumpy.png) no-repeat -192% 50%;
}

Подскажите пожалуйста, что я не так делаю? Задала класс диву в html, в css добавила ссылку, но картинка не появляется даже после многочисленных обновлений…вроде и адрес правильный

У вас : лишнее после класса в css.

И в следующий раз, пожалуйста, вставляйте сам код=) вот так insert

1 лайк

Точно, спасибо большое!! не заметила))

и все равно…
ни одна картинка не появилась =(

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: CAT Academy</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="block">
      <div class="stars"></div>
      <div class="fish"></div>
      <div class="grumpy"></div>
      <div class="drunk"></div>
      <div class="walk"></div>
      <div class="academy"></div>
    </div>
  </body>
</html>



html,
body {
  margin: 0;
  padding: 0;
}

.block {
  width: 300px;
  height: 300px;
  background-color: #3498db;
}

.stars {
  background: url("/assets/course13/star.png");
}

.fish {
  background: url("/assets/course13/cat_fish_128");
}

.grumpy{
  background: url("/assets/course13/cat_grumpy_128.png");
}

.drunk {
  background: url("/assets/course13/cat_drunk_128.png");
}

.walk {
  background: url("/assets/course13/cat_walk_128.png");
}

.academy {
  background: url("/assets/course13/cat_academy.png");
}

Размеры укажите.

Вот указала размеры на первые 2 картинки, но опять ничего не появилось. Пыталась вставить чужие готовые коды и также ничего не отображалось ни в хроме, ни в опере.

html,
body {
  margin: 0;
  padding: 0;
}

.block {
  width: 300px;
  height: 300px;
  background-color: #3498db;
}

.stars {
  background: url("/assets/course13/star.png") repeat-x 0px 270px;
}

.fish {
  background: url("/assets/course13/cat_fish_128") repeat-x 50% 50%;
}

Внимательно переписывайте адреса ссылок. Вот здесь расширение файла картинки не дописали.

в первой дописано расширение, во второй добавила ,ничего не изменилось

Приветствую!

Это испытание обновилось не так давно. Теперь не нужно указывать путь до изображения assets/course13, а нужно просто указывать имя файла, например, cat_fish_128.png.

Если сбросить код, то в комментарии испытания теперь обновлённая инфа.

Все по-прежнему…размеры и расширение указаны, код сбросила и изменила ссылки

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: CAT Academy</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="block">
      <div class="stars"></div>
      <div class="fish"></div>
      <div class="grumpy"></div>
      <div class="drunk"></div>
      <div class="walk"></div>
      <div class="academy"></div>
    </div>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
}

.block {
  width: 300px;
  height: 300px;
  background-color: #3498db;
}

.bg {
  height: 300px;
}

.stars {
  background: url("star.png") repeat-x 0px 270px;
}

.fish {
  background: url("cat_fish_128.png") repeat-x 50% 50%;
<div class="bg"></div>

Попробуйте для этого класса указать несколько background, как написано в теории.
Например,

.bg {
  height: 300px;
  background: url("star.png") repeat-x 0px 270px,
              url("cat_fish_128.png") no-repeat 50% 50%;
}

Фоновые картинки не появятся, пока вы не пропишете высоту для каждого из блоков.

.bg {
  height: 300px;
   background: 
   url("cat_fish_128.png") no-repeat 90px 145px,
   url("cat_grumpy_128.png") no-repeat 15px 125px,
   url("cat_drunk_128.png") no-repeat 160px 125px,
   url("cat_walk_128.png") no-repeat 80px 80px,
   url("cat_academy.png") no-repeat 20px 20px,
   url("star.png") repeat-x 0px 10px,
   url("star.png") repeat-x 0px 270px;
}

100% на 12.02.2022

.bg {
  height: 300px;
  background:
  url('cat_fish_128.png') no-repeat 90px 145px,
  url('cat_grumpy_128.png') no-repeat 15px 125px,
  url('cat_drunk_128.png') no-repeat 160px 125px,
  url('cat_walk_128.png') no-repeat 80px 80px,
  url('cat_academy.png') no-repeat 20px 20px,
  url('star.png') repeat-x 0 10px,
  url('star.png') repeat-x 0 270px
}

Результат на 02/11/2022

.bg {
  height: 300px;
  background:
  url("cat_fish_128.png") no-repeat 90px 145px,
  url("cat_grumpy_128.png") no-repeat 15px 125px,
  url("cat_drunk_128.png")no-repeat 160px 125px ,
  url("cat_walk_128.png") no-repeat 80px 80px,
  url("cat_academy.png") no-repeat 20px 20px,
  url("star.png") repeat-x 0px 270px,
  url("star.png") repeat-x 0px 10px
  }