HTML No background

Question

After no success, please help

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>

Answer 1 · 2013-03-16T15:56:47Z

March 16, 2013 3:56pm

In your background CSS class, there's a space between 'url' and the link. Remove that space and it should work.

Answer 2 · 2013-03-16T16:05:09Z

March 16, 2013 4:05pm

ooh thats fixed my background colour issue, my background colour now loads but the image still doesn't

Answer 3 · 2013-03-16T18:18:54Z

March 16, 2013 6:18pm

This may sounds like a stupid question, but is your image in the correct place and is the filename the same?

Answer 4 · 2013-03-16T20:59:27Z

March 16, 2013 8:59pm

yeah, my images on my index.html load perfectly they are in the same folder as the Bgtext.jpg

Answer 5 · 2013-03-16T21:49:23Z

March 16, 2013 9:49pm

That's where the problem is. I believe that folder containing website looks like this:

index.html
css 
  -grid.css
  -style.css
  -normalize.css
img
  -img#1.jpg
  -img#2.jpg
  -...

When You use img in index You use path img/'and decided img file path' for example:

<img src="img/audir8.jpg">

But when You use img for background in reality You are using it in your style.css in CSS folder so You have to escape it using '..' so url to Your img should look like:

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

Other possible solution if You don't want to escape using '..' is to use a separate folder for images used in for background images/textures which You would place inside css folder like this:

css
  -style.css
  -grid.css
  -normalize.css
  img
     -bgtext.jpg

Here and here You will find good tutorials about relative and absolute file paths.

Answer 6 · 2013-03-16T22:05:29Z

March 16, 2013 10:05pm

Oh that sorted my problem! Thanks! :) been looking for it for ages, this was explained to me yesterday but didn't seem to work.

Glad its all sorted, thanks for ur help! :)

Sanj

Welcome to the Treehouse Community

Looking to learn something new?

Jay Sharma

Jay Sharma

HTML No background

6 Answers

Ben Singer

Ben Singer

Jay Sharma

Jay Sharma

Ben Singer

Ben Singer

Jay Sharma

Jay Sharma

Jakub Kusmierz

Jakub Kusmierz

Jay Sharma

Jay Sharma