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

HTML

Posted by Derek Markman
Derek Markman
16,291 Points

[HTML][CSS] setting background-image isn't working

On my desktop I have a file that I keep all of my html/css/js files in called "test", inside of "test" I have my index.html file, as well as a jpg named "testpic.jpg" but I can't seem to get my jpg to display to my screen as my background image, any thoughts as to why this is happening? I can set my background image if I point the src towards an image on google images, but why wont it work if I just have an image already in the folder and I'm using a url?

index.html

<!DOCTYPE html>
<html lang="en-US">
<meta name="viewport" content="width=device-width">

<head>
<title>test</title>
<style>
    body{
    background-image:  url("testpic.jpg");
}

</style>
</head>
<body>
<h1>test</h1>
<div align="left" id="container">
test test test test test test 
</div>

</body>
</html>

16 Answers

Tobias Mahnert
Tobias Mahnert
89,414 Points

oh I didnt meant whitespace in the image. I meant

background-image: url('..\test website\testpic.jpg');

should be

background-image: url('../test_website/testpic.jpg');

the space between two letters is declared as whitespace and can cause problems sometimes when declaring paths. also check if it works with different angle slashes

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

you probably need to declare the folder. something like 

background-image: url('../test/testpic.jpg');

Where is your Indexfile located?

Derek Markman
Derek Markman
16,291 Points

I've tried every possible combination I could think of for the url and nothing worked so far, my index file is located inside of the "test website" folder, the full file path is C:\Users\Derek\Desktop\test website\index.html

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

have you tried this ? 

<body background="testpic.jpg">

</body>

sometimes it also helps to delete the browser cache

Derek Markman
Derek Markman
16,291 Points

No I haven't tried doing it that way, but that also didn't work for me.

Derek Markman
Derek Markman
16,291 Points

clearing the cache didn't work either.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

can you see the file in the chrome inspector when you visit the site?

Derek Markman
Derek Markman
16,291 Points

yes this is what it says for the url "file:///C:/Users/Derek/Desktop/test%20website/testpic.jpg"

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

have you checked if there are any css property's which maybe override your body tag by default?

Derek Markman
Derek Markman
16,291 Points

Why would I need to override my body tag if I am already targeting it inside of the style tags? Since that takes precedence over all of the styling on the page shouldn't it have already overrode my body tag?

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

yea, sometimes it doesn't work :/ just checking.

did you try to mark your style tags? like this.

<style type="text/css">
    body{
    background-image:  url("testpic.jpg");
}
</style>
Derek Markman
Derek Markman
16,291 Points

That also doesn't work :/

Manish Bhan
Manish Bhan
553 Points
Manish Bhan
Manish Bhan
553 Points

Code seems right actually, check if format is right or any other thing to sort out

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

I assume you can display your picture normally when you click on it yes? Did you try to put the image as background for the div?

Derek Markman
Derek Markman
16,291 Points
Derek Markman
Derek Markman
16,291 Points

Ok I tried setting it for my div with:

#container{
    background-image: url('..\test website\testpic.jpg');
}

/* I also tried */

#container{
    background-image: url('C:\Users\Derek\Desktop\test website\testpic.jpg');
}

Neither of these worked, and yes I can view the picture if I click on it directly.

Manish Bhan
Manish Bhan
553 Points

did u try without inserting any path,

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

have you tried to get rid of your whitespace in the img url?

Derek Markman
Derek Markman
16,291 Points

Yes, the image was already cropped so there isn't any whitespace on the pic.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

also, i'm not sure if it makes a difference but i think you have to use slashes like this when declaring a path

background-image: url('../test/testpic.jpg');

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

you have to change the foldername and the path maybe

Derek Markman
Derek Markman
16,291 Points

Ok give me a few minutes and I'll change things around and see if any of this works.

Derek Markman
Derek Markman
16,291 Points
Derek Markman
Derek Markman
16,291 Points

Ok I finally got it working, I now have a file called "car website" and inside is my index file and 2 jpg's named red_car.jpg and gray_car.jpg. and this is what worked for me:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta name="viewport" content="width=device-width">
    <title>car website</title>
<style>
    #bodyid #container{
        height:  1000px;
        width:  1000px;
        background-image: url('../car website/red_car.jpg')
    }

</style>
</head>
<body id="bodyid">
<h1>MY AWESOME WEBSITE</h1>
    <div id="container">
    test test test test test test test 
    </div>
</body>
</html>

But now I have another question lol, I saw when I tried to add the image without the height and width styling it was showing me the very top of my image, so I tried setting my height and width to "100%" So it was relative to the size of the pic, but instead it just showed me a 2 x 2 image of the top of the jpg, so I set both the height and width to 1000px each, and that was able to fit my entire jpg and I could see it on the screen. But why didn't the 100% value work?

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

did you try cover? 

html { 
  background-image: url('../car website/red_car.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

also, the image ratio is important. its something about 1280px by 640px or so

Derek Markman
Derek Markman
16,291 Points

You're saying to try that with my height and width for my div to 100%?

Derek Markman
Derek Markman
16,291 Points

If you're just asking if this works for background image in general then yes it does, but only when you change Background-image to just background. I think when trying to add on extra values like that you use the background property.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

no, instead of using height and width use 

background-size: cover;

that should cover your background with the background image. With image ratio i mean that the measurments of length and height of the background picture itself. Your screen can only display a fully covered background when the image fits to the screen measurments. if the image is for example a square, lets say 100*100px, it will be displayed with whitespace or only a part of the image. Even the cover command can't fix this.

Derek Markman
Derek Markman
16,291 Points

Ahh ok I see what you're saying, thanks for all of your help this was frustrating me so much lol.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

oh i guess you're right about the difference with background: and background-image. didn't realise that this matter. was an interessting journey. all the best bro