How do you reduce the opacity of a section background image?

Store Design
, , , , ,
1

I am using an image as a section background and I would like to reduce the opacity of the image. Could someone advise me on the code input I would need to use. I have used the following code to insert the photo:

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(“image”) !important;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100%;
}

I have tried adding opacity: 60% but that reduces the opacity of the background image and the collection images.

I have only started to design a website using code, so thank you for the help.

1 Like
2

Hi @Woodpaz_books,

This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Reduce The Opacity Of A Section Background Image, let’s try this solution:

There are two ways to reduce the opacity of a section background image:

Using CSS:

To reduce the opacity of a section background image using CSS, you can use the opacity property. The opacity property takes a value between 0 and 1, where 0 is completely transparent and 1 is completely opaque.

For example, the following CSS code would reduce the opacity of a section background image by 50%:

CSS

section {
  background-image: url(my-image.jpg);
  opacity: 0.5;
}

Using an overlay:

Another way to reduce the opacity of a section background image is to use an overlay. An overlay is a semitransparent layer that is placed over the top of the background image.

To create an overlay, you can use a

element with a solid background color and a reduced opacity. For example, the following HTML and CSS code would create a black overlay with a 50% opacity:

HTML

CSS

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
}

Which method you use to reduce the opacity of a section background image is up to you. The CSS method is simpler, but the overlay method gives you more control over the appearance of the overlay.

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

Hi @woodpaz_books

Please add code to Custom CSS of section in Customize so it will change that section only instead of affect to all content in store

Screenshot 2023-10-10 at 09.19.18.png
Screenshot 2023-10-10 at 09.19.18.png2045×1001 397 KB

4

Thank you for everyone’s help. I have attached an image below to help explain what I’m trying to do.

Screenshot 2023-10-10 at 11.55.32 pm.png
Screenshot 2023-10-10 at 11.55.32 pm.png2784×1098 858 KB

When I try some of the suggestions, the only time opacity is reduced is when all the opacity of all photos is reduced. I am struggling to reduce the opacity of just the background image with the CSS code I used to place the background image:

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(“image”) !important;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100%;
}