Jump to content

How ho have backgroundcolor with image?


rain13

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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>
  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...