Title just about says it all. I've been trying all the idears i could come up with, but yet no susces. So can one of you sweet people help me with my dumb question, and tell me how I mage the bg color be infront of the bg img?
If you are working with a single element i.e. <div class="bg-color-img">
, it's not going to happen.
What I mean by that is doing something like the following.
.bg-color-img {
background: red url(/image.gif) no-repeat;
}
There is no way of adjusting that, You will need to use nested elements in order to stack them.
I tried testing the multiple background-image
method, but I see no way other than stacking separate elements.
<div class="bg-container">
</div>
.bg-container {
position:relative;
width:200px;
height:200px;
}
.bg-container:before, .bg-container:after {
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.bg-container:before {
background-image:url(https://www.w3schools.com/cssref/img_tree.gif);
}
.bg-container:after {
background-color:rgba(255,0,0,0.5);
}
I did test that this works in the BSS app, Edge/IE11, FF, Chrome.
Not sure exactly what you're trying to accomplish, if it's just to give the img an opaque look you might be better off using an image and just give it an opacity value and forget the stacking all together.
<div class="bg-container">
< p>This is going to be a lot more text so that it can cover the whole image section to show that the opacity is only effecting the background image and not the content that will appear on top of it.< /p>
</div>
.bg-container {
position:relative;
width:200px;
height:200px;
}
.bg-container:before {
display:block;
content:"";
position:absolute;
top:0;
left:0;
z-index: -1;
width:100%;
height:100%;
background-image:url(https://www.w3schools.com/cssref/img_tree.gif);
opacity: 0.5;
}
Saj
Thanks for the very in depth answer Sej, I appreciate that a lot. I can see that I can use you method to accomplish what I want. However, I think last time I had this problem the solution was quite a bit simple.
To specify my problem. I have a background img on the body. What I then wanted was to make it slightly darker by adding over a layer of black with opacity of 0.5. What i did first was to try to add that layer of black directly onto the body too, that didn't work, so I made a div that covered the hole page and applied the black to that instead, and then just build inside the div..
I realized that was a hazel, so I change my mind and edited the photo darker in Photoshop instead - probable also the only sensible way to handle it.
Thanks! :-)
OK, I see better.
I'd say that you could make a 1x1 pixel.gif of the opacity color you want and then use the multiple background-image method.
body {
background-image: url(bgc05-pixel.gif), url(bg-img.gif);
background-repeat: repeat, no-repeat;
}
I believe that will get you what you want, the stacking background-image
s work in a backwards order then what HTML z-indexing does.
Saj
Thanks Saj very helpful indeed!