复制About Section后背景图不更新问题及背景图修改方法咨询

Alright, let's tackle the two issues you're having with your repeated About sections—here's how to fix them step by step:

1. Fix: All About Sections Display the Same Image #

Why This Happens #

Your about_img() function uses $(".about-section .about-img").attr("data-image") to grab the image path. The problem? This jQuery method only returns the attribute value from the first matching element on the page. Then it applies that single path to every .about-img element—so all sections end up using the first section's image.

The Fix #

We need to loop through each .about-img element individually and handle its image path separately. Update your about_img() function like this:

function about_img() {
	var width = $(window).width();
	// Loop through each unique .about-img element
	$(".about-section .about-img").each(function() {
		var $currentImgContainer = $(this);
		// Get the height of the parent about section for this image
		var sectionHeight = $currentImgContainer.closest(".about-section").height();

		if (width >= 992) {
			$currentImgContainer.find("img").remove();
			var imagePath = $currentImgContainer.attr("data-image");
			$currentImgContainer.css({
				"background-image": `url('${imagePath}')`,
				"height": sectionHeight
			});
		} else {
			$currentImgContainer.removeAttr("style");
			$currentImgContainer.find("img").remove();
			var imagePath = $currentImgContainer.attr("data-image");
			$currentImgContainer.append(`<img src='${imagePath}' />`);
		}
	});
}

Quick side fixes for your HTML:

• You have a typo: col-am-12 should be col-sm-12
• IDs must be unique! You used id="about-section" for both sections. Either change them to unique IDs (like about-section-1 and about-section-2) or just rely on the about-section class instead—duplicate IDs can break JS/CSS behavior.

2. How to Modify Background Images #

There are two easy ways to update the background images for your sections:

• Method 1: Use the data-image attribute (best for responsive sections): Just edit the data-image value on the .about-img div, e.g., change data-image="images/destination-1.jpg" to your new image path. Your updated about_img() function will automatically pick this up.
• Method 2: Custom CSS (for fixed non-responsive backgrounds) Add a unique class to the target about-section, then override the background in your stylesheet:

/* Example: Add 'custom-about-bg' to your about-section div */
.custom-about-bg .about-img {
	background-image: url('your-new-image.jpg') !important;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

Don't forget to trigger the function on page load and window resize to ensure images render correctly:

$(document).ready(function() {
	about_img();
	$(window).resize(function() {
		about_img();
	});
});

内容的提问来源于stack exchange，提问作者Heydar Aliyev