Apparently there is no direct way to apply opacity to a background image.
There needs to be a css opacity attribute in the background property such as background-opacity
There are a multitude of arcane work-arounds for this that require several lines of code and restructuring of the entire html page to make them work. This seems unnecessary, since the browsers internal design would be able to address this much more efficiently if the opacity attribute were required as a background property with a default value of 100% (1.0).
Proposed example css:
body{
background-image: url("images/backgroundimage.png");
background-size: cover;
background-repeat: no-repeat;
background-opacity: 0.33; / life would be so much simpler /
}
So far, the only easy way to do this is to take the original image and modify it in an image editor such as paint.net
Apparently there is no direct way to apply opacity to a background image.
There needs to be a css opacity attribute in the background property such as background-opacity
There are a multitude of arcane work-arounds for this that require several lines of code and restructuring of the entire html page to make them work. This seems unnecessary, since the browsers internal design would be able to address this much more efficiently if the opacity attribute were required as a background property with a default value of 100% (1.0).
Proposed example css: body{ background-image: url("images/backgroundimage.png"); background-size: cover; background-repeat: no-repeat; background-opacity: 0.33; / life would be so much simpler / }
So far, the only easy way to do this is to take the original image and modify it in an image editor such as paint.net