How can I adjust background img opacity? New here can't figure it out. Thank you
The easiest way is to make the background image look the way you want in a program like Photoshop. For example, if your site's background is white, and you want a very light background image of a sky with clouds, you'd bring the image into Photoshop, create a white layer, create a layer with your image, set the opacity on your image layer to whatever you want, then export it as a flat jpg.
If you want to do this with a normal image, you can use the CSS opacity rule, but you'll have to apply the background using a pseudo class so the opacity rule doesn't affect all the child objects in your div. You also have to position it absolutely.
body:before {
content: "";
background-image: url("my-image.jpg");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.5;
}
Personally, I think it's easier to do it with Photoshop.
Ya that's how I did it too using an image editor and setting the opacity of the image. You can also use color fills inside rows/cols/divs and fill it with your favorite color. The color picker has an opacity setting built in in BSS so that helps a lot too when you are wanting to do something without an image.
Hey there, I used a linear gradient before adding the background image, and it did the trick!
So when you head to Appearance > Body > Background > Add image, then add a linear gradient, swap them to that the gradient is on top of the background image, then adjust the gradient accordingly (I used a light color with “strong” transparency).
A good idea is to also match this with sections that have their own background opacity higher than the background to make sure any text stands out within the page.
Hope this helps 