Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

Posted by Arun B.S
Arun B.S
6,239 Points

Layer a transparent color over an image using multiple background property , is it valid?

it will not work when we try to Layer a transparent color over an image like the code below , what is wrong with it ?

.login-bg{ background: rgba(97, 98, 116, .5), url("../images/login-bg.png"); }

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Quick question, Arun :)

When you run the code what happened? Do you just get the image, the colour or nothing at all?

edit:

It turns out you can't add a layer in that manner (If you can, I wasn't able to find it).

You need to set the transparent layer in to a child element that fills 100% of the parent div with the background, etc.

You may need to play around with the positioning of the child element if you have content within the .login-bg to make sure it fills the entirety of the parent element without shifting any of the content :)

Hope this helps. Let me know if it breaks.

CSS: 

.login-bg {
    background: url("../images/login-bg.png");
    height: 200px;
    width: 200px;
}
.layer {
    background-color: rgba(50, 50, 50, 0.7);
    width: 100%;
    height: 100%;
}

HTML:

    <body>
        <div class="background">
            <div class="layer"></div>
        </div>
    </body>
Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

That is genius!

The gradient renders as an image so of course it would be able to render on a multi image background! Very smart man. Keeping that one in the bank :)

1 Answer

Arun B.S
Arun B.S
6,239 Points

Hey Liam -

Answer : it returns background color.

i think it is not possible to add a color over images using css multiple background , we need to use gradient as background color.

Here is the modified code with "css Gradient" and it works . 

.login-bg{ background:linear-gradient(rgba(97, 98 ,116 , .5), rgba(97, 98 ,116 , .5)), url("../images/login-bg.png"); }

Thank you