HTML/CSS background not showing

Question

My backgrounds not seeming to show, heres my code

CSS:

body {

font-family: 'Nunito', sans-serif;
color: #FAF3BC;
background: #420600 url ('img/bgtext.jpg') repeat;

}

a {
    color: #4FB69F;
    text-decoration: none;
}

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Boximation Motors</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

</head>

<body>

    <div class="container clearfix">
        <div class="grid_4">
            <img src="img/logo.gif" alt="Boximation Motors'">
        </div>
        <div class="grid_8 omega">
            <ul class="nav">
                <li><a href="#">Promotions</a></li>
                <li><a href="#">Screenshots</a></li>
                <li><a href="#">About Me</a></li>
                <li class="last"><a href="#">Contact Us</a></li>
            </ul>
        </div>

        <div id="intro" class="grid_9">
            <h1>We have a great range of motors, if your budget is £350, we have a car for you,
                if you want to spend £100,000 then we have a car for you also.</h1>
            <p><a href="#" class="btn">Browse our cars on Promotion</a></p>
        </div>
        <div class="grid_3">
            <img src="img/audi.png" alt="You Bake Me Blush">
        </div>


        <div id="featured-cupcake" class="grid_7">
            <h2>Car of the week</h2>
            <p>This week’s featured car is the <a href="#">Audi R8</a>. It's a great mixture of 
                design and performance.</p>
            <img src="img/audir8.jpg" width="460" height="290" alt="Audi R8 Sport">
        </div>

        <div id="new-cupcakes" class="grid_5 omega">
                <h2>Fresh Out the Oven</h2>
                <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>. </p>
            <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
            <img src="img/new-cupcake-jalapeno.jpg" alt="Spicy Lime">
        </div>




            <div class="grid_7">
                <h2>Inside the Kitchen</h2>
                <p>  started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
                <p><a href="#" class="btn-small">Read More</a></p>
            </div>


        <div class="grid_5 omega">
            <h2>Get Bakin’ with Us</h2>

            <div id="contact">
                <p>Call us: <span>1-800-CUP-CAKE</span><br>
                Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
            </div>

            <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>     
            <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
            <a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>
        </div>

        <div id="copyright" class="grid_12">
            <p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
        </div>

    </div>

</body>
</html>

[[ed. note:]] Added markdown to fix code formatting

Answer 1 · 2013-03-15T20:39:41Z

March 15, 2013 8:39pm

Hi Sanjay,

Last I checked the filename for the background is bg-texture.jpg. I don't know if you intentionally renamed it to bg-text.jpg or if it's a typo on your end. This could be what is preventing the background from showing.

Manny

Answer 2 · 2013-03-15T20:44:04Z

March 15, 2013 8:44pm

Hey Manny,

Thanks for the reply, however the background was my own additional one i set hence a different file name, i did try the original name and file but nothing seems to happen. just not sure why the pictures not showing, the alternative background colour shows

Thanks

Sanjay

Answer 3 · 2013-03-15T21:13:25Z

March 15, 2013 9:13pm

Sanjay,

The reason your background image is not showing up is because you added the background property to a style rule for the body of your HTML document. Unfortunately, it does not appear that your HTML document has a body. You seem to nest everything in a few set of divs, but your document doesn't seem to encapsulate its content in a body tag!

Remember that a semantically sound HTML document is structured like this:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="directory/to/styleSheet.css">
        <title>Page Title</title>
    </head>
    <body>
        <!-- The body of your HTML document goes here -->
    </body>
</html>

If I added some content to the body of my HTML document, then I could write a rule like this to style it in CSS:

body {
    background: #F00 url('img/background.jpg') repeat;
}

If none of this rings a bell to you, you might review the "Introduction to HTML" video in the Website Basics badge here on Treehouse. I hope this helps solve your issues!

Best,

J.T.

Answer 4 · 2013-03-15T21:24:49Z

March 15, 2013 9:24pm

Sanjay,

I just noticed that you updated your Markdown for your previous post. Apparently you do have a <body></body> tag in your HTML document -- good! :)

Is it possible that your bgtext.jpg image is located in the wrong directory? Your stylesheet seems to point out that your background image is located at img/bgtext.jpg -- this is a relative path starting from the css/ directory. Does your css/ directory contain a subdirectory named img/ containing the file bgtext.jpg?

Answer 5 · 2013-03-15T21:30:33Z

March 15, 2013 9:30pm

Hey,

Thanks for the reply J.T Gralka, I have a folder on my desktop called "Website Design" inside of that i have a img folder, then inside that i have the bgtext.jpg, just puzzled why its not working still :) thanks so much again!

Sanj

Answer 6 · 2013-03-15T21:39:33Z

March 15, 2013 9:39pm

There's your issue! You'll want to update your body rule, specifically the background property, like this:

body {
    /* Notice the .. at the beginning of your URL path! */
    background: #420600 url ('../img/bgtext.jpg') repeat;
}

The ../ at the beginning of your relative path says that the directory img/ is located one level up from the current directory. Since your stylesheet is located in the css/ directory, and the css/ directory is on the same level as the img/ directory, you'll need a way to tell your stylesheet that the directory in which your background image is located is actually one level up from the current directory. If this doesn't make any sense, I encourage you to check out the Links section of the HTML Deep Dive here on Treehouse, specifically the segment named "Websites: Part 2".

Hopefully this solves your problem...

Answer 7 · 2013-03-15T21:48:38Z

March 15, 2013 9:48pm

Hey,

thanks for this again, after trying that my background colour "420600" has disappeared which i thought was a good sign as my background might be loading, but its just plain white and its not loading, my background files only 200Kb, tryed it with Safari aswell as chrome and had no luck :(, but with my images else where on my index.html i haven't used ".." to go up a directory, and images load fine

Thanks again!

Answer 8 · 2013-03-16T08:50:21Z

March 16, 2013 8:50am

Could anyone see what the issue is? thanks so much

Answer 9 · 2013-03-24T01:00:50Z

March 24, 2013 1:00am

Folks, I ran into a similar problem and there is really no instruction in the course to either:

Nest the img folder inside of the css folder, or
Instruction as above about how to layout relative paths for links/URLs.

This is an elementary level course and most of your students will be typing by rote at this point in their careers and will not spot the problem. Since there are no live instructors - other than this forum, the tendency will be to assume that they did something wrong (as I did) and spend a lot of time looking for a missing or additional semicolon or other error.

Please update the course videos and narration to correct this minor but annoying problem.

Thanks for listening to my rant.

Answer 10 · 2013-03-24T01:44:56Z

March 24, 2013 1:44am

I am pretty sure that the Smells Like Bakin' tutorials expect you to understand how to nest folders in your css subdirectory. In any case, I encourage you to consider how you manage your files in your project because it's very important! If you think of an image as a background asset, then you should store it with your stylesheets if it makes sense to you. In other words, you should become comfortable with how your project is organized.

Benjamin, while I understand your concern about the way some instruction is delivered here on Treehouse, I encourage you to be patient when it comes to understanding how to work through your problems. Sometimes you learn a lot more from trial and error, and although it's frustrating sometimes to be expected to learn something that's not been taught explicitly to you, I'm sure you can understand that it's hard for Treehouse to anticipate beforehand every problem students might come across. In a lot of cases, though, I know that Treehouse teachers go back and rerecord videos because they witness students' frustration; therefore, I encourage you to email support@teamtreehouse.com with any questions or concerns you have about the videos, and I hope my explanation helps you understand relative paths and project organization a bit better.

Cheers,

J.T.

Answer 11 · 2013-03-24T13:46:59Z

March 24, 2013 1:46pm

This is an elementary level course and most of your students will be typing by rote at this point in their careers and will not spot the problem.

I'd suggest you don't try to learn by rote at all.

My own personal opinion, most of the valuable learning in the project-based courses takes place from taking notes on the concepts of the videos and then is re-enforced in doing the code challenges.

It's a matter of teaching style and that's just my viewpoint. You can read about the concept of struggle-based learning in teaching programming in this article.

Answer 12 · 2013-05-06T14:28:49Z

May 6, 2013 2:28pm

Thanks for the help! The backwards directory worked! :)

Answer 13 · 2016-05-12T02:33:35Z

May 12, 2016 2:33am

Also one thing I have noticed when saving images from photoshop, sometimes you assume that it is saving with an extension .jpg or.png and it is not, I know weird. Sometimes I have to manually rename the image with the correct file extension. My PS may have a bug and I do need to update but worth a thought.

Welcome to the Treehouse Community

Looking to learn something new?

Jay Sharma

Jay Sharma

HTML/CSS background not showing

13 Answers

Manny Roque

Manny Roque

Jay Sharma

Jay Sharma

J.T. Gralka

J.T. Gralka

Joseph Torres

Joseph Torres

J.T. Gralka

J.T. Gralka

Jay Sharma

Jay Sharma

J.T. Gralka

J.T. Gralka

Jay Sharma

Jay Sharma

Jay Sharma

Jay Sharma

Benjamin Taub

Benjamin Taub

J.T. Gralka

J.T. Gralka

James Barnett

James Barnett

Jeremy Stover

Jeremy Stover

Nathan Edwards

Nathan Edwards