Как разместить фон так чтобы он заходил на другой блок?

Чтобы разместить фон таким образом, чтобы он заходил на другой блок, вам понадобится использовать CSS свойство background. Вот несколько способов, которые вы можете использовать для этой цели.

1. Использование отрицательного отступа:

<style>
    .background {
        background: url(путь_к_файлу_изображения) no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
        z-index: -1;
        margin-bottom: -50px;
    }

    .content {
        background-color: white;
        margin-top: 50px;
        padding: 20px;
    }
</style>

<div class="background"></div>
<div class="content">
    <!-- Ваш контент -->
</div>

В данном примере, мы создали класс .background, который устанавливает фоновое изображение с помощью CSS свойства background, а также устанавливает размер изображения таким образом, чтобы оно покрывало всю область контейнера блока .background. Затем мы использовали отрицательный отступ margin-bottom класса .background, чтобы поднять блок с контентом .content на высоту фона.

2. Использование псевдоэлементов:

<style>
    .background {
        position: relative;
        z-index: -1;
    }

    .background::before {
        content: "";
        background: url(путь_к_файлу_изображения) no-repeat;
        background-position: center center;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .content {
        background-color: white;
        margin-top: 50px;
        padding: 20px;
    }
</style>

<div class="background">
    <div class="content">
        <!-- Ваш контент -->
    </div>
</div>

В этом примере, мы использовали псевдоэлемент ::before класса .background, чтобы создать дополнительный слой перед контентом. Мы установили фоновое изображение с помощью CSS свойства background и настроили его размер и позицию с помощью свойств background-position и background-size. Затем мы абсолютно спозиционировали псевдоэлемент относительно блока .background, чтобы оно занимало всю его область.

3. Использование позиционирования:

<style>
    .background {
        background: url(путь_к_файлу_изображения) no-repeat;
        background-position: center center;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
    }

    .content {
        background-color: white;
        margin-top: 50px;
        padding: 20px;
    }
</style>

<div class="background"></div>
<div class="content">
    <!-- Ваш контент -->
</div>

В этом примере, мы задали фоновое изображение для блока .background и задали его размер и позицию с помощью свойств background-position и background-size. Затем, мы абсолютно спозиционировали блок .background относительно его родительского контейнера. Мы также установили отступ bottom блока .background, чтобы он не перекрывал нижнюю часть блока с контентом.

Вариант, который выбрать именно вам, зависит от ваших предпочтений и требований вашего проекта.