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 Marshall Wells
Marshall Wells
2,044 Points

Why doesn't this background image work?

ignore the parenthesis instead of brackets for posting purposes

So if I have this HTML

(body)
(div class="container clearfix")
all my content here
(/div)
(/body)

Why doesnt my background work on the container div (putting a backgroun image behind my entire container but not the entire viewport) with this css?

.container{
background-image: url(../img/aebackground.jpg);
 }

I know the path to the image is correct because I can apply it to the body and it works, but it doesnt work when I apply it to .container

9 Answers

Chase Lee
Chase Lee
29,275 Points

Are your images in a folder? If so what is the name of it?

Chase Lee
Chase Lee
29,275 Points

Also Keep the quotes in.

Marshall Wells
Marshall Wells
2,044 Points

Its working now. I dont know what I did, I changed the background to the banner .jpg since i knew that worked and it worked. When I switched it back to the background jpg it worked. craziness

Thanks for troubleshooting with me though! I appreciate it.

Marshall

Chase Lee
Chase Lee
29,275 Points

No probs.

Thomas Wainwright
Thomas Wainwright
2,672 Points
Thomas Wainwright
Thomas Wainwright
2,672 Points

You need to add the quotes to the beginning of the alt tag.

Marshall Wells
Marshall Wells
2,044 Points

Hey thomas, I just had a bad copy paste, i edited my original post, mind looking at the issue?

Thanks!

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

You need to put it between quotes.

Chase Lee
Chase Lee
29,275 Points

You need to put it between quotes.

Marshall Wells
Marshall Wells
2,044 Points

Chase tried that still not working

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Try this:

.container{
background: url('../img/aebackground.jpg');
 }
Marshall Wells
Marshall Wells
2,044 Points

(div class="container clearfix") (cant get it to show this line with the brackets

        <div class="grid_10">
            <img src="img/aebanner.jpg" alt="Agnostic Effect CS:GO">
        </div>

        <nav class="grid_10 omega">
            <ul>
                <li><a href="#"><div class="button" id="newsbutton">News</div></a></li>
                <li><a href="#"><div class="button" id="matchesbutton">Matches</div></a></li>
                <li><a href="#"><div class="button" id="rosterbutton">Roster</div></a></li>
                <li><a href="#"><div class="button" id="forumsbutton">Forums</div></a></li>
                <li><a href="#"><div class="button" id="sponsorsbutton">Sponsors</div></a></li>
            </ul>
        </nav>
    </div>

with 

body{
     background-color: black;
}
.container{
    background: url('../img/aebackground.jpg');
}

not working

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Can you give a screenshot of your layout.

Marshall Wells
Marshall Wells
2,044 Points
Marshall Wells
Marshall Wells
2,044 Points

Hmm I think it has something to do with the container when I inspect element it only highlights the area at the top where the banner is, but doesnt go down to includes where my nav list is. Inspect element is making it look like my .container stops at my nav section even though nav is nested within .container... if that makes sense?

Chase Lee
Chase Lee
29,275 Points

Do you know how to take a screenshot?

Marshall Wells
Marshall Wells
2,044 Points

All image hosting is blocked from work...

So i set the body to white. I have one banner centered, then 20px of space then 6 nav buttons centered and inline

then in a p tag below that, the word BLAH.

If I do 

.container{
    background-color: black;
}

The container properly turns black for its width up to the word blah since its the last content on the page. one the sides and below my container is still white like it should be.

if i do

.container{
background: url(../img/aebackground.jpg)
}

Everything stays white no background image, with or without quotes in that line. But if I apply that same line to body then everything is covered in the background image... doesnt matter if i do background-image: either

so confused

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Is your css in a folder called css or something else like that?

Marshall Wells
Marshall Wells
2,044 Points

yeah its in a css folder and linekd properly because I can change the background colors, just cant get the image to work. But it works on the body, which I dont want.

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

Have you tried using this? .container { background-image: url("../img/aebackground.jpg"); } I believe background-image is used more often for this purpose. Also you were missing quotes and a semi-colon :)

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

Sorry :) I was looking for some aid with CSS and thought I could help...a year ago :)