Jump to content

Need help identifying block ID/Class to disable background image in block

Go to solution Solved by Web_Solutions,

Recommended Posts

Site URL: https://www.nell.love/

I'm attempting to disable the background image applied to the only block on this page for screens over 2k/2560. This is the page

https://www.nell.love/


I can't seem to figure out the block ID to target it. I've tried using the Squarespace ID finder and just trying every ID I could find in inspect but can't seem to get it right.

I want to do this because the block background feature looks great on 1920/mobile but I've loaded in a custom image in CSS and set it as a background for 2k+ screens. So that's why you can see 2 background images on the larger screens right now. I need to target and disable the block background on the 2k screens.

Can you help me figure out the block ID???

Here's my image code

u/media (min-width: 2560px) {

  body {

    background-image: url('https://static1.squarespace.com/static/65d14f421e24d15f45e9a66a/t/66e0f177d2fd9a21b7627d95/1726017911292/ps-fw24-splash-v1.jpg');

  }


And the background disable code (with a ID that doesn't work)

/* Disable background image on screens larger than 2560px */

@media only screen and (min-width: 2560px) {

    #yui_3_17_2_1_1725773568462_2208 {

        background-image: none !important;

    }

}

Link to comment
  • Replies 3
  • Views 438
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
2 hours ago, badidea said:

Site URL: https://www.nell.love/

I'm attempting to disable the background image applied to the only block on this page for screens over 2k/2560. This is the page

https://www.nell.love/


I can't seem to figure out the block ID to target it. I've tried using the Squarespace ID finder and just trying every ID I could find in inspect but can't seem to get it right.

I want to do this because the block background feature looks great on 1920/mobile but I've loaded in a custom image in CSS and set it as a background for 2k+ screens. So that's why you can see 2 background images on the larger screens right now. I need to target and disable the block background on the 2k screens.

Can you help me figure out the block ID???

Here's my image code

u/media (min-width: 2560px) {

  body {

    background-image: url('https://static1.squarespace.com/static/65d14f421e24d15f45e9a66a/t/66e0f177d2fd9a21b7627d95/1726017911292/ps-fw24-splash-v1.jpg');

  }


And the background disable code (with a ID that doesn't work)

/* Disable background image on screens larger than 2560px */

@media only screen and (min-width: 2560px) {

    #yui_3_17_2_1_1725773568462_2208 {

        background-image: none !important;

    }

}

See the image. Replace the marked code with the code bellow.

@media only screen and (min-width: 2560px) {
  [data-section-id="66dd3488a9094a10cd3a8c94"] * {
    background: transparent !important
  }
  [data-section-id="66dd3488a9094a10cd3a8c94"] .section-background {
    display: none !important;
  }
}

 

Screenshot_202.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
16 hours ago, Web_Solutions said:

See the image. Replace the marked code with the code bellow

Thank you for finding that section ID!!!

Below is the updated code I'm using. Now it looks great, perfect, exactly what I wanted, but only when you preview it in the developer console in Chrome. Attaching screenshot. However, in the live, regular, view of the site, it's still showing the section background attaching. Me and ChatGPT have been going at this for hours and nothing seems to work to make that section background transparent at 2560+ in the actual live site 😭

 

body {
  background-image: url('https://static1.squarespace.com/static/65d14f421e24d15f45e9a66a/t/66e0f177d2fd9a21b7627d95/1726017911292/ps-fw24-splash-v1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


@media only screen and (min-width: 2560px) {
  [data-section-id="66dd3488a9094a10cd3a8c94"] * {
    background: transparent !important
  }
  [data-section-id="66dd3488a9094a10cd3a8c94"] .section-background {
    display: none !important;
  }
}

Screenshot 2024-09-11 at 9.04.30 PM.png

Screenshot 2024-09-11 at 9.04.42 PM.png

Link to comment
17 hours ago, Web_Solutions said:

I fixed it! I just had it break at 2000px. Thank you for your help!

This is where ChatGPT breaks down, it's too literal. It would've never suggested that because I requested it to break for 2k screens so it got stuck on 2560.

 

17 hours ago, Web_Solutions said:

Final working code:

body {
  background-image: url('https://static1.squarespace.com/static/65d14f421e24d15f45e9a66a/t/66e22f4d3d636a6a66da8d8f/1726099277596/ps-fw24-splash-v4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


@media only screen and (min-width: 2000px) {
  [data-section-id="66dd3488a9094a10cd3a8c94"] * {
    background: transparent !important
  }
  [data-section-id="66dd3488a9094a10cd3a8c94"] .section-background {
    display: none !important;
  }
}

 

See the image. Replace the marked code with the code bellow.

 

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.