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


#1

Не знаю как сделать это задание. Что значит “без повторения с позицией”? При добавлении фонового изображения, получается 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%;
}

#2

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


#3

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

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

то –

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


#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);
}
Обратите внимание на строку background-size. Ее трогать не надо. В комбинированном свойстве background на первом месте всегда пишется фоновый цвет, если имеется, дальше фоновая картинка (ее адрес), потом режим повторения и позиционирование.


#5

:writing_hand:


#6

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


#7

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


#8

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


#9

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


#10

а я вот так все проходил) Сразу весь блок)) Спасибо что сказали)
%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA