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

Frankie Lamar
Frankie Lamar
11,120 Points
Posted by Frankie Lamar
Frankie Lamar
11,120 Points

Background image not rendering

I have a file called record.png saved in my directory and I'm trying to use css to set this image as the background for a website. I added background-image: url('record.png') to the external style sheet, but it is not rendering in the browser. What am I doing wrong? Here is my html:

<!doctype html>

<html lang = "en">
    <head>
        <meta charset="utf=8">
        <title>Top Shelf Squeeky Door</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type= "text/javascript" src= "javascripts/app.js">


        </script>


    </head>
    <body>
        <div id="container">
            <h1>Top Shelf</h1>
        </div>
        <div id="wrapper">
            <div id="nav">
                <ul>
                    <li><a href ="index.html">Home</a></li>
                    <li><a href = "Artist.html">Artists</a></li>
                    <li><a href = "media.html">Media</a></li>
                    <li><a href = "downloads.html">Downloads</a></li>
                    <li><a href = "contact.html">Contact</a></li>
                </ul>
            </div>
            <div id= "aboutpara">
                <p> TopShelf Productions is a fresh, new, soulful, independent, Music Production Company birthed out of necessity to build something greater.  It all started with rubbing two sticks together to create that FIRE!, so we could bring you the most flyest of the flyness and the dopest of the dopeness  that we can muster up out of our minds …and right into your listening pleasure!  We make our own music front to back. Period. Dot.  Figga’ if you gon’ be a Monkey…be a Gorilla!  It’s TopShelf!</p>
            </div>
        </div>

    </body>

</html>

...and here is my style sheet:

body {
    background-image: url('record.png');
    background-color: darkgrey;
    font-family: courier;
    color: white;
}



a{
    text-decoration:none;
    color: white;
    text-align: right;
}

ul {
    display: inline;
    list-style-type:none;
    padding:10px;
    margin:10px;
    width: 20px;
    height: 32px;
    background-color: grey





}

ul li {
    display: inline;

}

#aboutpara {
    background: grey;
    margin: 1.5em;
    padding: 1em;
    width:500px;
    opacity: 0.4;
    position: absolute;
    left: 25%


}

#bio {
    background: grey;
    margin: 1.5em;
    padding: 1em;
}

#wrapper{
    height: 100%;
    width: 100%;
    background-imag: record 1.png;
}

7 Answers

Corby Bodenburg
Corby Bodenburg
15,151 Points
Corby Bodenburg
Corby Bodenburg
15,151 Points

Frankie, This is misspelled: background-imag: record 1.png;

background-image: url('record.png');

Frankie Lamar
Frankie Lamar
11,120 Points
Frankie Lamar
Frankie Lamar
11,120 Points

That must have happened during the copy and paste. It is spelled correctly in my actual code, but it still does not render in the browser.

Corby Bodenburg
Corby Bodenburg
15,151 Points
Corby Bodenburg
Corby Bodenburg
15,151 Points

what question are you on, where can I find it?

Jason Founts
PLUS
Jason Founts
Courses Plus Student 14,384 Points
Jason Founts
Jason Founts
Courses Plus Student 14,384 Points

Could you post your code on codepen.io? Is the record.png file located in the CSS director? If not, what's the folder path?

Frankie Lamar
Frankie Lamar
11,120 Points
Frankie Lamar
Frankie Lamar
11,120 Points

I uploaded my code to codepen. The tag is "topshelf".

Jason Founts
Jason Founts
Courses Plus Student 14,384 Points

URL? Couldn't find you on codepen.

Brian Champion
Brian Champion
3,611 Points
Brian Champion
Brian Champion
3,611 Points

I'm having a very similar problem with getting background images to load and render. The background-color works fine. I've checked paths to the image files and I can even access the image in a browser using the path. Here's my codepen although I don't know how to use images on codepen yet so the image isn't there to load. Any assistance would be appreciated. http://cdpn.io/DxtHs Thanks!

John Short
John Short
2,891 Points
John Short
John Short
2,891 Points

I had this problem too, it was because the image was in my normal img folder, rather than the css img folder.