Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change background image opacity

jpwelchux

Asked by jpwelchux,

Followers 4

Question

jpwelchux    0

jpwelchux
Posted

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?

Screen Shot 2020-01-20 at 12.22.11 PM.png

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Posted Images

3 answers to this question

Recommended Posts

  • 0

tuanphan    8,233

tuanphan
Posted

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

theresa.southern    2

theresa.southern
Posted (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;
}

 

image.thumb.png.8623e93af07ea5d3f68059f405c665dd.png

Edited by theresa.southern
Link to post
  • 0

vanessakrystin    0

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

 

image.thumb.png.8623e93af07ea5d3f68059f405c665dd.png

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..]?

ex.png

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 4
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources