Unable to bring background image in front of background color

Question

I am trying to set image as background and add background color to content.But I am not able to get the background image over background color. Also I want background image over span#test Any help will be highly appreciated.

 <div id="container">
               <div id="Content">
                Hello world, this is my content, Hello world, this is my content <br />
                Hello world, this is my content, Hello world, this is my content <br />
                Hello world, this is my content, Hello world, this is my content <br />
                Hello world, this is my content, Hello world, this is my content <br />
            </div>
            <span id="test">
                Test
            </span>
        </div

    #container
    {    
        position: relative;
        margin-bottom: -20px;
        background-image: url('https://www.google.co.uk/images/srpr/logo11w.png');
        background-size: contain;
        background-repeat: no-repeat;
        height: 50px;
        width: 100px;
        z-index: 10001;
    }
    #Content
    {
       background-color:#C9CACA;

    }

Here is the link 'http://jsfiddle.net/chetangawai/FFS4V/5/'

score 3 · Answer 1 · 2014-05-02T08:40:04.743

3

try

#container
{    
    position: relative;
    margin-bottom: -20px;
    background:#C9CACA  url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat;

}

here Jsfiddle example

edited May 02 '14 at 08:40

answered May 02 '14 at 08:28

score 2 · Answer 2 · edited May 23 '17 at 12:22

Here we might need semitransparent backgrounds here to display the background image along with the colored background of child element.

Lets try out with the background opacity customization

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>sample</title>
</head>
<body>
    <div>
        <div style="background: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSo4ID8F-Kj9gnVC25mtiNd4zfNqyF0g4cC-kGx2HOAstRdza5v'); background-size: cover;">
                         <center>
                        <div  style="height:200px;width:500px;background-color:rgba(255,0,0,0.5);">

                            <h1 class="headingLabel" style="color: white;">Lorem ipsum
                                dolor</h1>
                            <p style="font-size: 14px;color:white">Lorem Ipsum is slechts een
                                proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is
                                de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw,
                                toen een onbekende drukker een zethaak met letters nam en ze
                                door elkaar husselde om een font-catalogus te maken. Het heeft
                                niet alleen vijf eeuwen overleefd maar is</p>
                        </div>
                                                <div style="height:100px;width:500px;background-color:rgba(255,11,100,0.5);">
                            another test content
                        </div>
                                                </center>
        </div>
    </div>
</body>
</html>

score 1 · Answer 3 · edited Feb 26 '14 at 07:27

1

div#Content is contained within div#container, and thus will have a higher z-index and appear above #container and it's background image.

edited Feb 26 '14 at 07:27

Mr. Alien

153,751
34
298
278

answered Feb 26 '14 at 07:25

flauntster

2,008
13
20

Thanks for your reply.Can you please suggest share jsfiddle for the same. – Chetan Gawai Feb 26 '14 at 07:42

score 1 · Answer 4 · answered Feb 26 '14 at 07:26

You have an element under your background colored #Content, and this element will stay under the background image. If you want to achieve the reverse, you could do:

#container
{    
    position: relative;
    background-color:#C9CACA;
    margin-bottom: -20px;
    height: 50px;
    width: 100px;
    z-index: 10001;
}
#Content
{
    background-image: url('https://www.google.co.uk/images/srpr/logo11w.png');
    background-size: contain;
    background-repeat: no-repeat;
}

Your updated fiddle

Thanks for the reply.But my `div#container` contains other elements which should have background image and not background color. — Chetan Gawai, Feb 26 '14 at 07:32

score 1 · Answer 5 · answered Feb 26 '14 at 07:29

Updated fiddle DEMO

#container
    {    
        position: relative;
        margin-bottom: -20px;        
        height: 50px;
        width: 100px;
        z-index: 10001;
    }
    #Content
    {background-image: url('https://www.google.co.uk/images/srpr/logo11w.png');
        background-size: contain;
        background-repeat: no-repeat;
       background-color:#C9CACA;

    }

score 1 · Answer 6 · answered Feb 26 '14 at 08:22

do it like this it will solve your problem i checked it in your fiddle it worked, change the color of rgba according to your requirement

#container
{       
position: relative;
margin-bottom: -20px;
height: 50px;
width: 200px;
z-index: 10001;
}

#Content
{
background-color: rgba(102,102,102,0.3);
background: url('https://www.google.co.uk/images/srpr/logo11w.png'), rgba(102,102,102,0.5);
background-size: contain, contain ;
background-repeat: no-repeat;
    }

score 1 · Accepted Answer · answered Feb 26 '14 at 11:57

I have updated my fiddle according to the suggestions of NJInamdar as :

 #container
        {    
            position: relative;

            background-image:   url('https://www.google.co.uk/images/srpr/logo11w.png');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 10001;
        height:600px;
        }
        #Content
        {
           background-color:#C9CACA;
        opacity : 0.6;

        }

http://jsfiddle.net/chetangawai/FFS4V/6/

Unable to bring background image in front of background color

7 Answers7