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 1

Sharina V. Jones
Sharina V. Jones
11,459 Points
Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

Firefox: Background image not displaying

Hi all,

I'm using Firefox 25 and trying to do one of the tutorials. Everything displays but the steam image. Nothing is animated yet so I don't think this is a prefix issue. Any thoughts?

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);
    -moz-transform: rotateZ(-5deg);
    -o-transform: rotateZ(-5deg);
    -ms-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}
Yorick Toma
Yorick Toma
742 Points

Hey , is your css in a seperate folder ? If so , use ../ in front of your image url .

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

No, it's in the same folder. I don't get why all the other images display but the steam one won't.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I can't remember, does it show up in the video?

You have the opacity set to 0 so I would think that it should not be showing up.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

Yes. In the video the steam is part of the the image at the start of the project.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I see at the 2:20 mark that you can see the steam but if you look at the css right before that, Guil doesn't have opacity: 0 in his css yet. Perhaps it's added later so that it's not showing up right at the start of the animation.

Try commenting out your opacity and see if you can see the steam.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Alexandra Silcox
Alexandra Silcox
24,486 Points
Alexandra Silcox
Alexandra Silcox
24,486 Points

Since the opacity is set to 0 and you don't have the animations to set up to change that opacity, could that simply be the reason the steam image isn't showing up? I believe the reason it showed up in the video was because the opacity was set to just prior to them setting up the key frames. So when you were viewing the steam image in the video, it was prior to them changing the default opacity in the css to 0.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

You're right it was the opacity. It was set to 0 in the beginning files of the project but when I commented it out, I was able to see the steam. Thank you!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi fallencloud,

If you're working off project files and not continually updating your own files then you might want to get the project files from the previous video that you're currently on. It might not be true for every project but generally it seems that the project files are what the code looks like at the end of the video. It's not really meant to be starter code for that video. That may be what happened to you.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

The previous video was a different project. The files for this video had two folders, a start folder and a final folder. I got my files from the start folder. Aside from the opacity issue, everything is blank and ready for me to add it.

I'll definitely keep this in mind though.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Sorry , my memory is failing me. Thanks for correcting. In that case you may want to email support about this to see if opacity can be removed from the starter files as it can cause confusion.