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 Unused CSS Stages CSS Animations Full-Page Animation Project: Part 2

Posted by Blake Wilson
Blake Wilson
8,592 Points

Images from css not showing.

Hi, I have been following along with the tutorial building the animation. In my css after putting in all the values for the background property in the body and .boat::after selectors, the boat and island images are not showing up. I even fully copied the project file code to see if my syntax was off and still no go. The css file links properly, my images are in the correct file path. Any suggestions as to what would be the issue would be great! Thanks

4 Answers

Blake Wilson
Blake Wilson
8,592 Points

Ok, success. I figured it out. It was a simple file path issue for the island.png and steam.png in my css. I originally had url('img/steam.png') and url('img/island.png'), instead I needed url('../img/steam.png'). Thanks for the help. I dropped the online steam image in and it worked and then it occurred to me.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'd suggest you create a codepen and link it here in this thread so we can see the bigger picture.

You'll find all the images available at http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/ the easiest way to make that change is to do a find and replace for for img/ to http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/

As an example, you'd replace ...

background: url('img/steam.png') no-repeat;

With this on codepen ...

background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat;
Misty Majewski
Misty Majewski
5,276 Points
Misty Majewski
Misty Majewski
5,276 Points

Are any images showing up?? You may be having issues with where the images themselves? Please show your coding.. In html first to make sure you are connecting to the images correctly..

Blake Wilson
Blake Wilson
8,592 Points
Blake Wilson
Blake Wilson
8,592 Points

The images island.png and steam.png are set to their respective background properties in my css. The background color works, but not the image itself. Here is the HTML. Same as the practice files, but my stylesheet labeling is different. The tugboat image also shows up from it's HTML img element.

<!DOCTYPE html>
<html>
<head>
    <title>Tugboat Animation</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animation.css">
</head>
<body>
    <div class="boat">
        <img src="img/boat.png" alt="tugboat">
    </div>
    <img class="mike" src="img/mike.png">
</body>
</html>

Here, is my CSS. Also the same as the project files at this point. 

body {
    background: #F0FCFF url('img/island.png') repeat-x 100% -460px;
    background-size: 780px;
}
.boat {
    width: 380px;
    position: absolute;
    top: 40%;
    left: 35%;
}
.boat img {
    width: 100%;
}
.boat::after {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    background: url('img/steam.png') no-repeat;
    background-size: 120px;
    position: absolute;
    top: -25%;
    left: 5%;
    opacity: 0;
}
.mike {
    width: 180px;
    position: absolute;
    top: 55%;
    left: -15%;
    -webkit-transform: rotateZ(-5deg);
}