Mobile Home Page background image Keeps repeating

Site URL: https://www.calmetscoaching.com/

I wanted to use the same background image for both computer and mobile views but I had to modify the image in Photoshop  and use it for the mobile view. , i injected this code (below)  but the background image on mobile is repeating to every new section, regardless of even if i change the background image globally, what did i do wrong?

I'm also hiding sections which is working fine but i wonder if that is the culprit, i really don't know at this point.

The images Im providing show-  1. the image at the top and 2. that same image repeating to background of new section.

///////home//////

@media only screen and (max-width:640px){.section-background img {opacity:0} 
.section-background {background-image:url(https://static1.squarespace.com/static/6122430dfca2354fa4e79253/t/6228c5f4a5db4603b9682fe5/1646839285875/MOBILE+BG+PLACEHOLDER.jpg);background-size:cover;background-position:center;
background-repeat:no-repeat;}}

// Hiding and showing sections
@media screen and (max-width: 641px) {
section[data-section-id="612253bcf20b113b3568e06a"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="6228d921d9320814c9ac2b40"] {
 display:none !important;
  }
}

Every section on the page has this class name: .section-background

If you use CSS to add image for this class name, it will affect all sections on all pages.

Which section do you need to add background image? We can give the tweaked code

On 3/13/2022 at 1:32 AM, tuanphan said:

Every section on the page has this class name: .section-background

If you use CSS to add image for this class name, it will affect all sections on all pages.

Which section do you need to add background image? We can give the tweaked code

Hi taunphan, thanks for answering. To answer your question, I don't need to place an image in the section in question using css, the problem is I used css to place  a background image for the top section of mobile that is oriented differently than the PC image though they look a lot alike, and i added "do not repeat" and the end of the code  but that top image is repeating in the 3rd section from the top as you can see in the images i provided. Here is the code i used for adding background image to top section----

@media only screen and (max-width:640px){.section-background img {opacity:0} 
.section-background {background-image:url(https://static1.squarespace.com/static/6122430dfca2354fa4e79253/t/6228c5f4a5db4603b9682fe5/1646839285875/MOBILE+BG+PLACEHOLDER.jpg);background-size:cover;background-position:center;
background-repeat:no-repeat;}}

I'm aslo hiding sections from pc view, not sure if this is causing the problem but here is that code---

// Hiding and showing sections
@media screen and (max-width: 641px) {
section[data-section-id="612253bcf20b113b3568e06a"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="6228d921d9320814c9ac2b40"] {
 display:none !important;
  }
}
 

As I said above, .section-background is a class that appears in many places. You need to use [data-section-id="id here"] .section-background to target a specific section.