A single Background Image across Multiple Sections

To make a background image span between multiple sections, you can follow these steps

#1. Suppose you need to do this for Section 1, Section 2, and Section 3.

First, you need to edit 3 Sections > Add Code block on each section > Paste this code

<span class="span-section"></span>

#2. Add this code to the Custom CSS box and click Save

/* Span background image between sections */
.span-section-parent {
  & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

#3. Add this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
        $('.code-block .span-section').closest('section.page-section').addClass('span-section');
  $('section.span-section').wrapAll('<section class="span-section-parent"></section>');
    });
</script>

Ask me a question, free