CODEWITHSUNDEEP
css
AMHD
AMHD

Reputation: 387

Background: url in CSS not working

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 :(

Upvotes: 1

Views: 799

Answers (5)

bigmond
bigmond

Reputation: 1

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')}

Upvotes: 0

jeffjenx
jeffjenx

Reputation: 17487

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; 
}

Upvotes: 5

Millhorn
Millhorn

Reputation: 3176

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...

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24723

To go up 2 levels do this

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

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32941

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.

Upvotes: 2

Related Questions