rain13 Posted August 5, 2016 Share Posted August 5, 2016 Hi Right now I have background image with background color but only image gets displayed. I have to remove image if I want color. How do I draw background color on image so that I could get profir from half transparent bg? color: rgb(187, 187, 187); background-color: rgba(255, 81, 81, 0.46); background-image: url(http://orig01.deviantart.net/293b/f/2013/308/7/e/kali_linux_wallpaper_by_blur212-d6szsz7.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center; Link to comment Share on other sites More sharing options...
dsonesuk Posted August 5, 2016 Share Posted August 5, 2016 The background of image has to be made semi-transparent, the image will always be above background-color. You could place element over the image with the background required but it will cover the whole area of image, background and foreground. 1 Link to comment Share on other sites More sharing options...
rain13 Posted August 5, 2016 Author Share Posted August 5, 2016 You mean to create 2 divs on top of each other? I dont know how to exactly do that. I have tried different examples, but never figured it out. Could you show me minimalistic example? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 5, 2016 Share Posted August 5, 2016 Using element as overlay <!DOCTYPE html> <html> <head> <style> .background { width: 300px; height: 300px; background: url("img_tree.gif") no-repeat center; position: relative; } .overlay {background-color: red; position: absolute; top:0; left:0; right:0; bottom: 0; opacity: .46; } </style> </head> <body> <div class="background"> <div class="overlay"> </div> </div> </body> </html> Using css content property <!DOCTYPE html> <html> <head> <style> .background { width: 300px; height: 300px; background: url("img_tree.gif") no-repeat center; position: relative; } .background:after {background-color: red; position: absolute; top:0; left:0; right:0; bottom: 0; opacity: .46; content:""; } </style> </head> <body> <div class="background"> </div> </body> </html> 1 Link to comment Share on other sites More sharing options...
James_Purcell Posted August 6, 2016 Share Posted August 6, 2016 Ahh this answers a question I was going to ask. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now