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 CSS Foundations CSS Gradients Transparent Gradients

Barbara Savoie
Barbara Savoie
5,199 Points
Posted by Barbara Savoie
Barbara Savoie
5,199 Points

Images in CSS

When writing CSS in Notepad++ or in a generic text editor, whenever I try to add an image in CSS, it doesn't show up when I refresh the browser on my desktop. I'm having this problem both in Chrome and Safari. Can anyone tell me what I am doing wrong?

The CSS code for this particular lesson is, while working in Chrome: 

html {
height: 100%;
}

body {
    background: -webkit-linear-gradient(hsl(218,51%,32%), transparent 75%), url('bg.jpeg');
    background-size: cover;
}

I have an image in the same folder as the html and css files and it is named correctly. Thanks for any help!

Stef Serafin
Stef Serafin
967 Points

Hi Barbara,

Not sure what you're trying to do with the css html { height:100%; } There's no need to add the selector or rule called css before html and it's unnecessary to add a html rule right now at 100%. Again, I'm not sure what you're trying to do.

For a background to a body or html simply go like this. Also, make sure the image path is always correct and that there are no empty spaces in the image file name. Always use lowercase names and hyphens or underscores when naming assets.

If it's a large image that is. For images inside a div or element simply do away with the background sizes cover etc. If none of this works then you need to check your markup and post it here so we can better assess it. Otherwise we're just guessing.

body{url('image/path/to/imagename,jpg')no-repeat center center fixed 
     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
      background-size: cover;
 } 

 or

  html{url('image/path/to/imagename,jpg')no-repeat center center fixed 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

I just tried what you suggested and still no image comes through. Here is the css. Please let me know if I made a mistake: 

html {
    height: 100%;
}

body { 
    background: -webkit-linear-gradient(hsl(218,51%,32%), transparent 75%), 
        url('bg.jpeg') no-repeat center center fixed;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
        background-size: cover;
}

12 Answers

Stef Serafin
Stef Serafin
967 Points

Ok I had to ask. Wasn't sure.

Well, this is mine and as you can see on my URL I posted was working. So I'm not sure what else.

html { 
    background: -webkit-linear-gradient(hsl(25,51%,32%), transparent 15%), url('img/kelly.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}
Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

I deleted my code and copy/pasted your code into my css style sheet, created a folder called img, put my image into that folder, fixed the image name in your code to reflect my image name, and saved the file. For some reason, it still doesn't work when I refresh the browser. I appreciate your help. I'll just have to keep tinkering, it seems.

Phillip 25A
Phillip 25A
4,963 Points
Phillip 25A
Phillip 25A
4,963 Points

Hmm there seems to be a few versions of CSS syntax for adding an image.

Have you tried

body {
    background-image:url("path\filename.jpg");
}
Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

I just tried that and no, the image does not show up.

Stef Serafin
Stef Serafin
967 Points
Stef Serafin
Stef Serafin
967 Points

Is this what you're trying to do here?

Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

The lesson is calling for putting an image layer under a transparent gradient, yes. The problem occurs any time I try to use an image in CSS, however. This is just the first time I've asked for help. I am linking the css file to the html file and everything else works fine. It's just the images that I'm having trouble with.

Stef Serafin
Stef Serafin
967 Points
Stef Serafin
Stef Serafin
967 Points

Then it has to be the path you are not connecting with or the files actual name. Make sure that is all correct.

Stef Serafin
Stef Serafin
967 Points
Stef Serafin
Stef Serafin
967 Points

Oops

Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

I have all of the files in the same folder, like so: http://imgur.com/sIAea6V

My understanding of the file path when it is all in the same folder is that you can just call the file, so in this senario, I can use url('bg.jpeg'). This that not correct? If not, that may be my problem.

Stef Serafin
Stef Serafin
967 Points
Stef Serafin
Stef Serafin
967 Points

This may be a stupid question, but I can't see, do those files have extensions? Is index index.html or .php and is style style.css?

Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

The index is index.html and style is style.css.

Stef Serafin
Stef Serafin
967 Points
Stef Serafin
Stef Serafin
967 Points

Weird. And all 3 files are in a folder called html? Strange. Sorry I couldn't help further.

Barbara Savoie
Barbara Savoie
5,199 Points
Barbara Savoie
Barbara Savoie
5,199 Points

Yeah, everything is in the same folder. When I tried using your code and I did make a new folder inside the original folder called img and tried calling it using url('img/bg.jpeg'), but still no luck. It happens on my work computer with Safari and TextEdit and my home laptop with Chrome and Notepad++, so I was pretty sure it was me and not the browser or operating system. Again, thanks for all of your help.

Stef Serafin
Stef Serafin
967 Points
Stef Serafin
Stef Serafin
967 Points

Maybe your encoding is messed up. Hmmm. Hard to say without seeing all the markup.