Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

3D Transforming

Hello! Having just watched said tutorial I wanted to give it a go myself but I've failed at the first hurdle...I really don't understand but my pictures just won't show up! If anyone can point out what is wrong with my CSS I'd greatly appreciate it as currently both fail to appear and appear as colour when I input hex values in front. I don't see any obvious problem with my background syntax and my image folders are correct

body{
    background: pink
}

.wrap{
    position:relative;
    margin: 0 auto;
    width:250px;
    height:400px;
    cursor:pointer;
}

.wrap div{
    width:100%;
    height:100%;
}

.side-a{
    background:url('Images/JackF.png');
}
.side-b{
    background:url('Images/JackF.png') ;
}
<body>
    <div class="container clearfix">
        <div class="wrap">
            <div class="side-a"></div>
            <div class="side-b"></div>
        </div>
    </div>  

</body>
</html>

5 Answers

Hey thanks! that did work! But I was under the impression that ../ was only used to go back one level but my CSS/HTML and 'Images' folder are on the same level?

That's good, that's where they should be. However, if you are using a css file inside your css directory (which you are), you need to go up a level to get into the images folder. Unless your images folder was in your css folder, then you could use the code how you had it.

Okay, if that was a typo then my next question would be is your images directory inside your css directory? if not, you should bring try something like this

.side-a{
background: url('../Images/JackF.png');
}
.side-b{
background: url('../Images/JackF.png');
}

Did you really name your images Images.JackF.png? Or did you mean to put Images/jackF.png?

haha well spotted but that was a typo I made because I was getting stressed and tried editing all sorts of things. It's not the trouble sadly, I've tried uploading the picture elsewhere with no problem

I've tried other images in there and literally nothing works, do I need to add any other parameters elsewhere?