Как поместить картинку под другие блоки?

Question

[leshka qwe]

Как поместить данную картинку под другой текст?

HTML

<div class="wrapper">

        <div class="menu">
            <img class="menu__icon" src="assets/menu.png" alt="menu">
            <button class="start__project">
                Начните свой проект
            </button>
        </div>

        <div class="main__action-bar">

            <ul class="language__swipper">
                <li class="list__item">Ru</li>
                <li class="list__item">En</li>
                <li class="list__item">Ar</li>
            </ul>

            <p class="logo__image">
                <img class="logo" src="./assets/Logo.png" alt="Penkovit">
            </p>
            
        </div>
    </div>

    <div class="background">
        <img class="background__image" src="./assets/background.png" alt="">
    </div>

CSS

.wrapper {
    max-width: 1800px;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    padding-top: 40px;
    padding-bottom: 40px;
}

.menu {
    display: flex;
    justify-content: space-between;
}

.menu__icon {
    height: 32px;
    width: 32px;
}

.start__project {
    font-family: 'Gilroy SemiBold', sans-serif;
    font-size: 16px;
    height: 47px;
    width: 222px;
    background-color: black;
    color: white;
    border-radius: 18px;
    cursor: pointer;
}

.main__action-bar {
    padding-top: 252px;
    display: block;
}

.language__swipper {
    display: inline-block;
    position: absolute;
    cursor: pointer;
}

.list__item {
    font-family: 'Gilroy Bold', sans-serif;
    font-size: 18px;
    margin-bottom: 24px;
    
}

.logo__image {
    text-align: center;
}

Как должно быть:

Answer 1

[Геннадий]

background-image

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Comments

[leshka qwe]

Спасибо, но можете ли подсказать куда его поставить? Я просто куда не пробовал, она становится не так, как нужно, либо что нужно сделать что бы она поставилась как надо...

[Геннадий]

leshka qwe, вы даже статью не прочитали, уже просите сделать за вас. Есть ощущение, что вы ничего не пробовали и не искали. Показывайте, что вы делали и что у вас получилось.

[leshka qwe]

Геннадий, Статью я прочитал, но не нашел там ответа на мой вопрос. Пытался ставить background-image в body и wrapper, ничего не получилось из этого. Пытался поставить по позиционированию и z-index, тоже не вышло. Приходил только к тому, что картинка обрезается.

[Геннадий]

leshka qwe, показывайте, что сделали и что получилось. Без примеров вашего кода предметного разговора не будет.

[leshka qwe]

Геннадий, Добавил в wrapper:

.wrapper {
    max-width: 1800px;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    padding-top: 40px;
    padding-bottom: 40px;
    background-image: url(../assets/background.png);
}

Последняя строчка

На выходе получил:

[Геннадий]

leshka qwe,

body {
    background-image: url(../assets/background.png);
    background-position: top;
    background-repeat: no-repeat;
}

.wrapper {	
    max-width: 1800px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

[leshka qwe]

Геннадий, спасибо вам большое!
картинка встала туда, где должна быть.
Но только одна проблема, она обрезается..

[Геннадий]

leshka qwe, она не обрезается. Уберите белый фон во wrapper.

[leshka qwe]

Геннадий, Спасибо вам большое!
Извиняюсь за какие-то глубые впоросы...

[Froggyweb]

leshka qwe, ставить фон на боди - это очень плохо.ведь будут другие страницы.
лучше сделать отдельный блок intro hero или еще что-то.
Учесть что картинка в фоне не будет растягивать фон

[leshka qwe]

Froggyweb, Здравствуйте, совет человека выше оказался действительно рабочим. Но учту и ваше замечание, спасибо за совет!

[Геннадий]

Froggyweb,

ставить фон на боди - это очень плохо

Очень спорное заявление, а размещение фона на body является обычной практикой для общего фона. В любом случае, важно учитывать контекст проектов.

[Froggyweb]

Геннадий, эта картинка наверняка не будет являться общей для всех страниц. поэтому и плохо.