Селекторы, часть 2 / Фон для псевдоэлементов [17/20]

[REGISTOOOOOO]

Не знаю как сделать это задание. Что значит “без повторения с позицией”? При добавлении фонового изображения, получается 4 сердечка.
вот код:

.card {
    position: relative;
    width: 160px;
    height: 240px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: white;
    background-size: 50px auto;
    border-radius: 5px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
}
.card{
    background-image: url(/assets/course57/heart.svg);
    background-size: 50% 50%;
    }
.card::before {
    content: "A";
    position: absolute;
    top: 5px;
    left: 5px;
    padding-bottom: 20px;
    font-size: 30px;
    color: #e50000;
    background-size: 25px auto;
    background-image: url(/assets/course57/heart.svg);
    background-size: 50% 100%;
}
.card::after {
    content: "A";
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding-bottom: 20px;
    font-size: 30px;
    color: #e50000;
    background-size: 25px auto;
    transform: rotate(180deg);
    background-image: url(/assets/course57/heart.svg);
    background-size: 50% 100%;
}

[Ineska]

Без повторения - background-repeat со значением no-repeat, а позиция - это background-position.

[REGISTOOOOOO]

Подскажите, что не так

    .card {
        position: relative;
        background-repeat:no-repeat;
        background-image:url(/assets/course57/heart.svg);
        background-size: 50% 50%; 
    }

а если такой код использую

.card {
    position: relative;
    background:no-repeat url(/assets/course57/heart.svg) 50% 50%;
    }

то –

в чем ошибаюсь?

[Ineska]

Вот изначальный код:
.card {
position: relative;
width: 160px;
height: 240px;
margin: 0 auto;
margin-top: 30px;
background-color: white;
background-size: 50px auto;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
}
Обратите внимание на строку background-size. Ее трогать не надо. В комбинированном свойстве background на первом месте всегда пишется фоновый цвет, если имеется, дальше фоновая картинка (ее адрес), потом режим повторения и позиционирование.

[Gnom]

background-size: 50% 50%;

а позиция - это background-position.

[kirill_lalala]

Зачем добавлять такое задание? Если эту тему даже не проходили и в теории тоже ничего не говорится

[Ineska]

Чего конкретно нет в теории по-вашему?

[kirill_lalala]

Цель 1 Задайте карте фоновое изображение /assets/course57/heart.svg без повторения с позицией 50% 50%.
К примеру вот это. Я так понимаю это позиционирование , курс которого идет после селекторов.
Вообще до этого нигде не говорилось как это делать
Или я слишком рано залез в Селекторы часть 2 и 3?

[Ineska]

Да, вы просто отошли от программы. Если идти по порядку, то вопросов будет гораздо меньше.

[kirill_lalala]

а я вот так все проходил) Сразу весь блок)) Спасибо что сказали)

[madina]

Для меня как новичку было сложно решить задачу, но решив, радости моей не было предела))
Я оставлю это здесь, может кому-то поможет.
.card {
position: relative;
width: 160px;
height: 240px;
margin: 0 auto;
margin-top: 30px;
background-color: white;
background-size: 50px auto;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
background-image: url(“heart.svg”);
background-position: 50% 50%;
background-repeat: no-repeat;
}

.card::before {
content: “A”;
position: absolute;
top: 5px;
left: 5px;
padding-bottom: 20px;
font-size: 30px;
color: #e50000;
background-size: 25px auto;
background-image: url(“heart.svg”);
background-position: 50% 100%;
background-repeat: no-repeat;
}

.card::after {
content: “A”;
position: absolute;
right: 5px;
bottom: 5px;
padding-bottom: 20px;
font-size: 30px;
color: #e50000;
background-size: 25px auto;
transform: rotate(180deg);
background-image: url(“heart.svg”);
background-position: 50% 100%;
background-repeat: no-repeat;
}

[Shinji_Ikari256]

.card {
    position: relative;
    width: 160px;
    height: 240px;
    margin: 0 auto;
    margin-top: 30px;
    background: white url(heart.svg) no-repeat 50% 50%;
    background-size: 50px auto;
    border-radius: 5px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
}