Background change on one page section only

Site URL: https://duelle.studio/about

Hello all,

I am having some problems with figuring out how to change the background of a section in a page only (about page in this case) and only when in mobile view.

I have tried the code below but the image I want (the black one you can see in the screenshot) only covers a portion of the page/section background. However I want the full page background to change into this image (the black one) when I open the About page in mobile.

 @media screen and (max-width:767px)
  { 
  #collection-61d46ba2f63bf04e32662458
    .page-section
   { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/604cabf3c0df6d442f4ecb6c/1615637492980/210313_DUELLE+Icon.png") !important;
  background-repeat: no-repeat;
    background-size: bleed;
    background-position: center;
     
}
}

Hope I was clear enough and that someone here can help me out.

Thank you.

M

Don't remove your code, add this under

@media screen and (max-width:767px) {
#collection-61d46ba2f63bf04e32662458 .section-background img {
	visibility: hidden !important;
}
}

On 1/7/2022 at 1:39 PM, tuanphan said:

Don't remove your code, add this under

@media screen and (max-width:767px) {
#collection-61d46ba2f63bf04e32662458 .section-background img {
	visibility: hidden !important;
}
}

 

 

thank you. It worked but I had to add something targeting the footer anyways as the other image was still there. It works now.

 @media screen and (max-width:767px)
  { 
  #collection-61d46ba2f63bf04e32662458
    .section-background
   { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important;
  background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    img {
    visibility: hidden !important;

}
}
}
  

 @media screen and (max-width:767px)
  { 
  #collection-61d46ba2f63bf04e32662458
.content-wrapper, footer#footer-sections {
  visibility: hidden !important;
  
  }
}

On 1/10/2022 at 8:37 PM, MN88-MI said:

thank you. It worked but I had to add something targeting the footer anyways as the other image was still there. It works now.

 @media screen and (max-width:767px)
  { 
  #collection-61d46ba2f63bf04e32662458
    .section-background
   { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important;
  background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    img {
    visibility: hidden !important;

}
}
}
  

 @media screen and (max-width:767px)
  { 
  #collection-61d46ba2f63bf04e32662458
.content-wrapper, footer#footer-sections {
  visibility: hidden !important;
  
  }
}

You fixed or still need help?

On 1/12/2022 at 4:35 AM, tuanphan said:

You fixed or still need help?

yes thank you, I achieved what I wanted from the original question. I have now a couple of other things that bother me on the same page/code. hope you can have a look.

this is the code I have now which is fine  :

 @media screen and (orientation:portrait)
  { 
#collection-61dc4529fdc5342366fa9b80
    .gallery
   { background-image: url("https://static1.squarespace.com/static/5ff072b1fbf14e2399f4cb8f/t/610c24c8d375ab3084be62f6/1628185800802/Duelle+text+%2B+circle+mobile+version.png") !important;
  background-repeat: no-repeat;
    background-size: 90% ;
    background-position: center;
       img {
         visibility: hidden !important;}
     
}   }

FIRST QUESTION: Is there a way I can have two images, one after the other as in a slideshow or reel, as addition to this code above for mobile only portrait view? I still would like both text image and people photo to be visible in mobile portrait view if possible.

For tablet landscape view instead I would like to keep the original image I use for laptop/large screen view, which is the full bleed landscape image (half made of people photo, half of text). But I can't figure out how to scale only the image itself down a little so it doesn't crop text and faces when viewing it in tablet screen landscape. I would like a code targeted to the image itself which just fits the image to the type of screen without cropping it

SECOND QUESTION: how do I scale the image I am using for landscape mode to a 90% size only when in tablet mode landscape keeping it always full bleed?Alternatively, how do I visualise the image without being cropped at all in landscape tablet mode? See image below to see the crop on tablet

 I had this but it doesn't do the right thing, only cropping rather than scaling:

@media screen and (max-width: 1200px) {
#collection-61dc4529fdc5342366fa9b80 
 img {
   width: 80% !important;
      }
}

I have tried this too, but doesn't work. it just creates an empty band at low level.

  //smaller image in tablet mode
@media screen and (max-width: 1200px){
#collection-61dc4529fdc5342366fa9b80 
 img {
   width: 100% !important;
   height: auto !important;
        
}
}

duelle.studio/about  the page is public

Hope you can help. Thank you so much.