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

Posted by Luke Ayres
Luke Ayres
6,170 Points

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

Luke Ayres
Luke Ayres
6,170 Points

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?

Dave Evans
Dave Evans
13,160 Points

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.

Dave Evans
Dave Evans
13,160 Points
Dave Evans
Dave Evans
13,160 Points

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');
}
Dave Evans
Dave Evans
13,160 Points
Dave Evans
Dave Evans
13,160 Points

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

Luke Ayres
Luke Ayres
6,170 Points
Luke Ayres
Luke Ayres
6,170 Points

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

Luke Ayres
Luke Ayres
6,170 Points
Luke Ayres
Luke Ayres
6,170 Points

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