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.