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

Ссылка скопирована
CSS HTML PHP
3 мая 2026 1 ответ

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

Есть такой вот кусок макета, и не понимаю как лучше поступить с зеленым огнем на фоне. Он должен заходить на верхний блок.
<section class="wrapper_last_page"></section>

.wrapper_last_page {     background-image: url(/image/bg_last_page.svg);     background-repeat: no-repeat;     background-size: cover;     background-position: center;     display: flex;     height: 756px; }

.wrapper_last_page { background-image: url(/image/bg_last_page.svg); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; height: 756px; }

сейчас "огонь" прост растянулся на размер секции, как решить не понимаю

Дополнительно:

ну вариантов несколько, выбирайте на свой вкус(то что больше подходит, так как контекста недостаточно):
1) Верхняя секция не имеет своего фона, имеет абсолютноефиксированное или sticky позиционированием и на деле размещена поверх секции с огнём.
2) Второй вариант - верхняя секция всё так же не имеет своего фона, а огонь задан общему блоку, который оборачивает обе секции.
3) Ого как фоновая картинка задан обоим секциям и идеально спозиционирован так, что совпадает в единую картинку.

  • мне кажется это просто дизайн кривой, огонь не должен выходить за пределы, ибо ссылки типа download our media kit - будут не кликабельные, уточнять у дизайнера над
  • Вадим, спасибо сделала по второму варианту и все получилось!
  • szQocks, да я просто тренируюсь, мне стало интересно, как такое реализовать, если именно так и было задумано
  • Если вам хочется, чтобы огонь залезал поверх верхней секции и верхняя секция оставалась кликабельной - есть свойство pointer-events:none; в стилях.
    В этом случае "огонь" - отдельный элемент с таким свойством и позиционированный с таким z-индексом как надо .

    • Ответы:

    Я бы скорее подумала, что это не фон, а изображение - там сверху оно перекрывает текстовый элемент. Мне кажется, что его можно абсолютно спозиционировать в блоке и пусть вылезает.

    попробуй поместить в один блок и на него поставить фотку огня

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Артём Dev Ответ

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

    Пример кода на HTML и CSS:

    <div class="background-block">
  <!-- Ваш контент здесь -->
</div>
<div class="content-block">
  <!-- Ваш контент здесь -->
</div>

    <div class="background-block"> <!-- Ваш контент здесь --> </div> <div class="content-block"> <!-- Ваш контент здесь --> </div>

    .background-block {
  background-image: url('your-background-image.jpg');
  background-size: cover;
  background-attachment: fixed;
  height: 100vh; /* Высота блока равна высоте экрана */
}
 
.content-block {
  /* Стили для вашего контента */
}

    .background-block { background-image: url('your-background-image.jpg'); background-size: cover; background-attachment: fixed; height: 100vh; /* Высота блока равна высоте экрана */ } .content-block { /* Стили для вашего контента */ }

    В данном примере блок с классом "background-block" будет иметь задний фон, который будет заходить на блок с классом "content-block". Свойство background-attachment: fixed; зафиксирует фон блока и он останется на месте при прокрутке содержимого страницы.

    Не забудьте заменить 'your-background-image.jpg' на путь к вашему изображению фона. Также вы можете настроить другие свойства фона, такие как цвет, повторение, позиционирование и т.д., чтобы достичь желаемого эффекта.

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ