Почему background накладывается на блок?

Question

[Фёдор]

День добрый! Прошу помощи, чтобы разобраться в причинах того, почему изображение, которое я хочу установить как background , накладывается на мой блок?

<section class="block-contagion">
       <div class="wrapper">
           <div class="title-block__contagion">
               <h3>Covid-19</h3>
               <p>Contagion</p>
               <p>Corona viruses are a type of virus. There are many different kinds, and some cause disease. A newly identified type</p>
           </div>

        <div class="virus-transmission">
            <div class="test">
                <img src="/assets/image/content/air-transmission.svg" alt=''>
                <h3>Air Transmission</h3>
                <p>Objectively evolve tactical expertise before extensible initiatives. Efficiently simplify</p>
            </div>
            <div class="test">
                <img src="/assets/image/content/human-contact.svg" alt=''>
                 <h3>Human Contacts</h3>
                <p>Washing your hands is one of thesimplest ways you can protect</p>
            </div>
            <div class="test">
                <img src="/assets/image/content/Noise-rag.svg" alt=''>
                <h3>Containted Objects</h3>
                <p>Use the tissue while sneezing,In this way, you can protect your droplets.</p>
            </div>
        </div>
        </div>
    </section>

.block-contagion {
    background: url('/assets/image/bg/contagion.svg') 6% 85% no-repeat scroll;
}

.virus-transmission {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 200px;
}

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: calc(100% / 3 - 30px);
    border: 1px solid;
    border-radius: 10px;
    border-color: #fff;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    padding: 0 10px;
}

Comments

[Максим]

фона нету у этих блоков - разве нет ?

[Фёдор]

Много Чего, Господи, в жизни бы не додумался прописать блокам background-color. Спасибо!

P.S. Почему так происходит? Всегда думал, что цвет по умолчанию считывается как background.

[Максим]

Фёдор, просто - как через стекло -

[Вадим]

Фёдор, по умолчанию фон есть только у некоторых элементов: button, input, body. И то он не "по умолчанию" а браузеры решили так их рисовать.

[Фёдор]

Вадим, Теперь буду знать. Почти час ушёл, чтобы понять проблему. Пытался ещё через z-index сделать. Тоже без успешно. Да и думаю, тут он не совсем уместен.

Answer 1

[infommmmm]

у вас testАм не задан бекграунд
добавьте background:white

Comments

[Фёдор]

Да, я уже сделал по рекомендации первого комментатора.