jpwelchux Posted January 20, 2020 Share Posted January 20, 2020 I'm on 7.1 , and I'm using one of the "headline" sections that gives you a background image with text and button over top. My issue is that by default there is an opacity: 0.15 on the image and it looks washed out. How can I set the opacity to 0 for my background image so it's full color? This code used to work: .section-background-overlay{ opacity: 0; } Now, the above opacity is crossed out and this appears to be controlling the opacity: element { opacity: 0.15; } In the HTML it looks like there are several data controller tags like: data-image-overlay-opacity="0.15" Basically, I'm unclear how to reference this in css as it's not referencing a specific class or ID. How can I set the opacity to 0 for my background image so it's full color? Link to comment
tuanphan Posted January 21, 2020 Share Posted January 21, 2020 Hm I guess you need to use JS to change attribute value 0.15 Also, you should share link to your site. Difficulot to check without site url Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
theresa.southern Posted July 16, 2020 Share Posted July 16, 2020 (edited) @jpwelchux I know it's been awhile, but here is one option for you. Get the URL of the photo and use this CSS. Change opacity as desired. This is for Squarespace 7.1 and works for background images. You can always save the image with the opacity lowered but I like having the flexibility to change the opacity. [data-image="https://static1.squarespace.com/static/5ed54b8712824d33607048a7/t/5f10815a05b113770412e64c/1594917213740/business-executive-carrying-briefcase-walking.jpg"] { opacity: .5; } Edited July 16, 2020 by theresa.southern Link to comment
vanessakrystin Posted September 18, 2020 Share Posted September 18, 2020 On 7/16/2020 at 9:56 AM, theresa.southern said: @jpwelchux I know it's been awhile, but here is one option for you. Get the URL of the photo and use this CSS. Change opacity as desired. This is for Squarespace 7.1 and works for background images. You can always save the image with the opacity lowered but I like having the flexibility to change the opacity. [data-image="https://static1.squarespace.com/static/5ed54b8712824d33607048a7/t/5f10815a05b113770412e64c/1594917213740/business-executive-carrying-briefcase-walking.jpg"] { opacity: .5; } I'm also looking into changing the forced Opacity Overlay on this page's (nicetrycreative.com/packages) background but I've tried your code while inputting my BG image url but it didn't do anything 😞 Do you have any other suggestions? Used: [data-image="https://images.squarespace-cdn.com/content/v1/5f41b993ec8a536cf1ca5b7a/1600397794700-UZIR481TQ63LIUEIDRZT/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/NiceTry_ContactPage.jpg?format=2500w"] { opacity: 1; } Do I need to add something before the [data-image..]? Link to comment
salpilk Posted April 26, 2021 Share Posted April 26, 2021 Hi, I had this same problem when I was swapping my theme's demo content with my own. I realised there is actually a setting in the section background image editor which allows you to set the opacity - it was just set to 0,15 in the demo content Link to comment
tuanphan Posted April 28, 2021 Share Posted April 28, 2021 On 4/27/2021 at 1:48 AM, salpilk said: Hi, I had this same problem when I was swapping my theme's demo content with my own. I realised there is actually a setting in the section background image editor which allows you to set the opacity - it was just set to 0,15 in the demo content Hi. Did you solve it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment