Jump to content
rain13

How ho have backgroundcolor with image?

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;

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Ahh this answers a question I was going to ask.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...