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

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

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

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

To go up 2 levels do this

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

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32921

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