Jump to content

Mobile Home Page background image Keeps repeating

Recommended Posts

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;
  }
}

 

 

1.jpg

2.jpg

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
  }
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.