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

Posted by Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Can't seem to get background and background color property working...

Hi Guys i have no idea why this isn't working but i'm using bootstrap and i want to style the jumbotron but for some reason i can't get the background color to overlay the background image using the background property here are the two css styles that i have tried using

/* Jumbotron styles */

/*1st attempt*/

.jumbotron {
    background: url("/img/banner.png") #308ac6 no-repeat top left;
    background-size: cover;
    max-height: 850px;
    padding: 60px 0px;
    margin: 0px;
}

/*2nd attempt*/

.jumbotron {
    background: #308ac6 url("/img/banner.png") no-repeat top left;
    background-size: cover;
    max-height: 850px;
    padding: 60px 0px;
    margin: 0px;
}

Hope you guys can help i'm really confused why it doesn't work i've even copied the same styling from the docs but it doesn't seem to work i'm using chrome btw Guil Hernandez

jamescool
jamescool
44,592 Points

When you say that you're trying to "get the background color to overlay the background image", it sounds like you want the background color ON TOP of the image. Is this what you're trying to do?

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Yes thats what i want :)

3 Answers

Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Fixed it by separating the color and the image like so 

.jumbotron {
    background: url(/img/banner.png) no-repeat top left;
    background-color: rgb(44, 62, 80);
    background-size: cover;
    max-height: 850px;
    padding:60px 0px;
    margin: 0px;
}
Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points

Correct order for background is

background: color position/size repeat origin clip attachment image|initial|inherit;

From W3schools

It could also be a problem with stuff staying in cache, try reloading with ctrl + shift + r or delete the browser cache.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Still the same thing mate tried that and the color is not overlapping the image; the image is still infront of the background color. Could the size of the background image be a problem or does this not matter?

Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points

Oh, didn't read everything =D. The best way to do this is to use a container within a container. This way you could have it any way you'd like.

 <div class="bgr_img">
    <div class="overlay">
    </div>
<div>

.bgr_img {
    background-image: url(...);
    height: 400px;
    width: 100%;
}

.overlay {
    background-color: rgba( 50, 40, 30, 0.5 );
    height: 100%;
    width: 100%;
}