1

I'm new to CSS and was hoping someone could help me understand what I'm doing wrong. I'm trying to get an image to show up but it seems that no matter what I do it refuses to display on my page. Can someone please explain to me what I'm doing wrong?

Image saved in: Users/NenaH77/assignment/images/sitebg.jpg.

Css file is saved under: Users/NenaH77/assignment/css/style.css

body{ 
    background: url('../images/sitebg.jpg') no-repeat top top #31b8ea; 
   }

By having ../images I thought the image saved in the folder was suppose to go up 2 levels and into my css folder so I don't understand why my image isn't showing up :(

Improve this question
3
  • And where is the html file? Commented Aug 2, 2013 at 19:22
  • @Musa The location of the HTML file doesn't matter - when referencing a relative URL from within a CSS file, it's relative to the CSS file, not to the page. Commented Aug 2, 2013 at 19:23
  • Your linking relation is OK. Your situation is from another point. User MrSlayer got a point, your .css declaration is not valid. Start with this and come back if it didn't fix. Commented Aug 2, 2013 at 19:46

5 Answers 5

Reset to default
5

Your CSS background declaration is invalid:

top top should be top or top left or some other valid combination of positions.

Try :

body { 
    background: url('../images/sitebg.jpg') no-repeat 0 0 #31b8ea scroll; 
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I removed the top top and changed it to top but that didn't work.
Consider separating your background properties to long-hand notation (i.e. background-image: url('../images/sitebg.jpg'); background-repeat: no-repeat; ...) to see if you can figure out exactly which property is not working. Knowing how to debug problems will go a long way in learning how CSS works, or any new language, for that matter.
2

You need should probably put the background color first.

body { background: #31b8ea url('../images/sitebg.jpg') no-repeat top }

Mr. Slayer gave you the right answer though.

Improve this answer

5 Comments

This is not a true statement. The background color does not need to be put first.
Color don't need to be first.. [was edited, now the code it's ok, but duplicate..., and the color still don't need to be at start.. the problem was the top top declaration]
Well, I'll be damned.
The order of shorthand properties doesn't usually matter, except in certain situations such as margin and padding.
The order of shorthand properties doesn't matter with background. I wonder why the upvote.
0

To go up 2 levels do this

background: url('../../images/sitebg.jpg') no-repeat top top #31b8ea;
Improve this answer

1 Comment

My image still didn't come up with that either. I didn't realize I could go up that many more levels. Will have to keep that in mind. Thank you
0

This will work. You can see the fiddle here. 

body { background: url(../../img/image.jpg) no-repeat center center; background-size: cover;}

This will also take you up two levels...

Improve this answer

2 Comments

Thank you everyone. I've tried everyone's suggestions but I'm still having no luck :(
Why don't you try posting a link to your live site? Can you upload these files to a server? We'd love to help you, but debugging this live would be much easier.
0

I just ran into this same problem. What worked for me was putting the full path of the image from my pc, instead of from just inside the project folder.

So in this case use

body { background: url('C:/Users/NenaH77/assignment/images/sitebg.jpg')}

Instead of

body { background: url('../images/sitebg.jpg')}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.