Mystery Image showing on Mobile View

Site URL: https://satsang-with-anasuyaji.squarespace.com/

Hello! 
A client pointed out today that there is a double image appearing on the mobile view and not on the desktop view

The page is 

https://satsang-with-anasuyaji.squarespace.com/about-anasuya

password:   anasuyaji

When you view the top section on desktop view - there is an image with a faint flower.   Yet when you change to mobile view the following happens - in the screen shot I've attached. 

I've removed the current background image and the mobile style still appears .... a head scratcher for me!

Thanks for any thoughts! Or if I need to report it to SqSpace chat

Hi. On which page?

Hi Tuan!

Oh my, I missed that you responded! Thank You.

The page is "About"

Thank You!

Rei

The issue is that your ruleset for mobile is using background-size : cover; 

@media only screen and (max-width: 640px) {
  #page .page-section:nth-child(1) .section-background img {
    opacity:0
  }

  #page .page-section:nth-child(1) .section-background {
    background-image: url(https://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.pnghttps://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat
  }
}

This causes the image to shrink to cover the container, therefor exposing the picture in the lower right corner. From MDN...

Quote

 

cover

Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

 

Also there is a syntax error in your background-image property. But that isn't part of the issue.

Thank You @creedon for your reply.

I'm not sure if you fully see my issue.  

On the about page, I've selected the image in the screen shot for the background.

As you can see I did not select the image with the profile circle in the right corner... it's suppose to be the original...

Is the mobile code that I used (which is only suppose to affect the home page) somehow affecting the "About" page?

Is this making sense?  And if your answer addressed the issue - my apologies as I do not follow 🤪

Thank You!

The issue is in Design > Custom CSS. Look for the code I showed.

@creedon @tuanphan

I've adjusted the code as you suggested Creedon, yet as you can see in this screen shot - the image I want displayed only on the Home page in mobile view, is somehow appearing as a default on the About page ... even though - as you can see, I have not selected a "background" image for the section...

any thoughts? 🙏🏽

I think I'm seeing the fuller picture now.

So you want the home page to look like the following on mobile.

And no other pages to take on the profile picture.

Correct?

If so in Design > Custom CSS change the following.

@media only screen and (max-width: 640px) {
  #page .page-section:nth-child(1) .section-background img {
    opacity:0
  }
}

#page .page-section:nth-child(1) .section-background {
  background-image: url(https://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.pnghttps://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.png);
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat
}

...to...

@media only screen and ( max-width : 640px ) {

  .homepage #page .page-section:nth-child( 1 ) .section-background {
  
    background-image : url( https://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.png );
    background-position : right;
    background-repeat : no-repeat;
    background-size : cover;
    
    }
    
  .homepage #page .page-section:nth-child( 1 ) .section-background img {
  
    display : none;
    
    }
    
  }

Let us know how it goes.

@creedon 

Success !

Shwew*. Thank you for bearing with me on that one!

Thanks so much! ✨