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

HTML

Posted by Zach Kamp
Zach Kamp
5,259 Points

Issues with Marco Template

I recently purchased a Marco theme template. For some reason, I am having a problem adding images to the theme outside of the existing ones. The images are referred to in the HTML briefly like so:

        <div class="loader">
            <div class="loader-img"></div>
        </div>

Then when I check the CSS, it looks like this:

.loader-img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    background: url("../img/loading.gif") center center no-repeat;
}

My first inclination is to put the desired image in the corresponding image folder and then call it in the css by replacing the url. This however, results in no image being displayed. I tried to hard code the images in the HTML using <img> tag and that results in a broken image. Any ideas?

Christian Andersson
Christian Andersson
8,712 Points

Zach, you're gonna have to provide us much more details of what you are trying to do, what doesn't work, what you've tried to solve the problem, etc.

Show us some code and explain the situation better...

Sara Hardy
Sara Hardy
8,650 Points
Sara Hardy
Sara Hardy
8,650 Points

Are you sure the image path is correct? Sounds like it's not.

1 Answer

Christian Andersson
Christian Andersson
8,712 Points

Your code seems fine, so I cannot say for sure what could be wrong. It's very possible that the path might be incorrect.

If you have Google Chrome, you can use its Development Tool to inspect the document. Go to the page and then right-click > Inspect Element. A window should appear. From here you can navigate to the loader and loader-img divs and select them.

You should now be able to see all CSS properties that are applied to that div on the right-pane. Find the background-image property and see if the URL is correct. You can even mouse-over it too see if the pic loads. If the link is correct, then make sure the div has dimensions and that it displays properly on the page.

Good luck.