Fix the Background Image
What does this code do?
This code snippet will allow you to fix the background image in place so that the content scrolls overtop. The code you need will depend on how many background images you want to stay fixed in place and where they are on the page.
Option #1: A Background Image in the First Section
If you only want to add this effect to one background image per page and that image is in the first section on the page, then you can create this effect with some CSS.
Without a Background Effect
If you do not have a background effect, copy and paste this code into Design > Custom CSS.
/* Fixed Background */
#COLLECTIONID {
#page .page-section:nth-of-type(1) .section-background img {
position: fixed;
z-index: 0;
}
footer {
z-index: 100;
}
}
With a Background Effect
If you have a background effect on your image, copy and paste this code into Design > Custom CSS instead.
/* Fixed Background */
#COLLECTIONID {
#page .page-section:nth-of-type(1) {
.section-background img, .section-background-canvas {
position: fixed;
z-index: 0;
height: 70vh; /* height of the image */
}
}
footer {
z-index: 100;
}
}Option #2: A Background Image that is not in the First Section (but not in the Footer)
If you only want to add this effect to one background image on a page but that image is not in the first section, then you need to use the following CSS.
Without a Background Effect
If you do not have a background effect, copy and paste this code into Design > Custom CSS.
/* Fixed Background */
#COLLECTIONID {
#page .page-section:nth-of-type(-n+3) {
z-index: 100 !important;
}
#page .page-section:nth-of-type(4) .section-background img {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
footer {
z-index: 100 !important;
}
}Change the Collection ID to match the page you want the effect on. This code is set up to apply to the 4th section on the page. Change the 4 to represent the section you want the background effect in. Then change the 3 to be one less than the section.
With a Background Effect
If you have a background effect on your image, copy and paste this code into Design > Custom CSS instead.
/* Fixed Background */
#COLLECTIONID {
#page .page-section:nth-of-type(-n + 3) {
z-index: 100 !important;
}
#page .page-section:nth-of-type(4) {
.section-background img,
.section-background-canvas {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
}
footer {
z-index: 100 !important;
}
}Change the Collection ID to match the page you want the effect on. This code is set up to apply to the 4th section on the page. Change the 4 to represent the section you want the background effect in. Then change the 3 to be one less than the section.
Option #4: A Background Image in the First Section of the Footer
If you only want to add this effect to one background image in the footer and that image is in the first section, then you need to use the following CSS.
Without a Background Effect
If you do not have a background effect, copy and paste this code into Design > Custom CSS.
/* Fixed Background */
#COLLECTIONID {
#page .page-section {
z-index: 100 !important;
}
footer .page-section:nth-of-type(1) {
.section-background img,
.section-background-canvas {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
}
}With a Background Effect
If you have a background effect on your image, copy and paste this code into Design > Custom CSS instead.
/* Fixed Background */
#COLLECTIONID {
#page .page-section {
z-index: 100 !important;
}
footer .page-section:nth-of-type(1) {
.section-background img,
.section-background-canvas {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
}
}Option #5: A Background Image in the Footer that is not in the First Section
If you only want to add this effect to one background image in the Footer but that image is not in the first section, then you need to use the following CSS.
Without a Background Effect
If you do not have a background effect, copy and paste this code into Design > Custom CSS.
/* Fixed Background */
#COLLECTIONID {
#page .page-section, {
z-index: 100 !important; //page sections are on top
}
footer .page-section:nth-of-type(-n+1) {
z-index: 100 !important; // sections above background are on top
}
footer .page-section:nth-of-type(2) {
.section-background img,
.section-background-canvas {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
}
}Change the Collection ID to match the page you want the effect on. This code is set up to apply to the 2nd section in the footer. Change the 2 to represent the section you want the background effect in. Then change the 1 to be one less than the section.
With a Background Effect
If you have a background effect on your image, copy and paste this code into Design > Custom CSS instead.
/* Fixed Background */
#COLLECTIONID {
#page .page-section, {
z-index: 100 !important; //page sections are on top
}
footer .page-section:nth-of-type(-n + 1) {
z-index: 100 !important;
}
footer .page-section:nth-of-type(2) {
.section-background img,
.section-background-canvas {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
}
}Option #6: All Background Images (not including Footer)
If you want to add this effect to all of the background images on the main page than you need to use some Javascript.
Note: Make sure you don’t have sections with backgrounds too close together or their background images will overlap.
Step 1: Add jQuery Library
You only want to have one jQuery Library loaded on the website or the libraries will clash and cause your codes not to work. If you are already using jQuery, you can skip this step. Otherwise copy and paste this code in Settings > Advanced > Code Injection > Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Step 2: Add jQuery
Without a Background Effect
If you do not have a background effect, copy and paste this code into Settings > Advanced > Code Injection
<!-- Fixed All Background Images -->
<script>
$(document).ready(function () {
$(document).on("scroll", function () {
$("#page .page-section .section-background img").each(function () {
var parent = $(this).closest(".page-section");
var content = parent.find(".content-wrapper");
var sectionPos = content.offset().top;
var topOfWindow = $(window).scrollTop();
if (sectionPos < topOfWindow + 1000) {
parent.addClass("fixed-section");
parent.find(".section-background img").addClass("fixed").css("z-index", "0");
} else {
parent.removeClass("fixed-section");
parent.find(".section-background img").removeClass("fixed").css("z-index", "-1");
}
});
})
.trigger("scroll");
});
</script>With a Background Effect
If you have a background effect, copy and paste this code into Settings > Advanced > Code Injection
<!-- Fixed All Background Images -->
<script>
$(document).ready(function () {
$(document).on("scroll", function () {
$("#page .page-section .section-background img").each(function () {
var parent = $(this).closest(".page-section");
var content = parent.find(".content-wrapper");
var sectionPos = content.offset().top;
var topOfWindow = $(window).scrollTop();
if (sectionPos < topOfWindow + 1000) {
parent.addClass("fixed-section");
parent.find(".section-background img").addClass("fixed").css("z-index", "0");
parent.find(".section-background-canvas").addClass("fixed").css("z-index", "0");
} else {
parent.removeClass("fixed-section");
parent.find(".section-background img").removeClass("fixed").css("z-index", "-1");
parent.find(".section-background-canvas").removeClass("fixed").css("z-index", "-1");
}
});
})
.trigger("scroll");
});
</script>Note: If you only want to apply this code to one page, than you can place this code into the Page’s Code Injection instead by clicking on the gear icon next to the page and selecting Advanced.
Step 3: Add CSS
Then copy and paste the following code into Design > Custom CSS
/* Fixed Background Images */
.page-section:not(.fixed-section) {
z-index: 1 !important;
}
.fixed {
position: fixed !important;
top: 0;
z-index: 0 !important;
}
footer {
z-index: 100 !important;
}How To Use It
Copy and paste the code as indicated above.
To learn how to find a collection id, page id, or block id check out our Start Here guide.
