Have a background image with a transparent colour

Question

I’d like to be able to have a background image with a transparent colour covering the image. But when I try to put

background-image: url(mylocation);
background-color: darkgray;
opacity: 0.5;

inside the body {} tags, the image shows, but not the colour, and everything else is transparent. I’m pretty sure that everything else is transparent because they’re all child section of the body, but how would I fix this, so that it’s the way I’d like it to be?

Thanks!

How does the body of your question relate to the title? They seem to be 2 very different things? — Jon P, Sep 30 '14 at 04:14

score 1 · Answer 1 · answered Sep 30 '14 at 04:09

1

Try this:

body{
  background:url('Image url');
  opacity:0.5;
}

#container{
  background:transparent:
}
//=====================contain all tags

HTML design:

<body>
 <div id="container">
 </div>
</body>

answered Sep 30 '14 at 04:09

Hendry Tanaka

454
3
11

Jon P · Answer 2 · 2014-09-30T04:37:43.580

The background color is a fallback if the image can't be displayed, not a background for the image. Also be aware that opacity applies to the entire contents of the element, not just the background.

Try

html {
    background:url('Image url'); 
}


body {
    /*Use RGBA to get transparent color*/
    background-color:rgba(100,100,100,0.5);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0;
}

Demo

Though this may be a better option:

body
{
    background-image: url(http://placehold.it/200x200/ff0000/ffffff&text=BG+Image);
}


body:before
{
    display:block;
    opacity:0.5;
    background-color:darkgrey;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    content:"";
    z-index:-1;
}

Demo

Have a background image with a transparent colour

2 Answers2

Linked