Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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