PDA

Click to See Complete Forum and Search --> : CSS Problems - Image wont load

bigmedia
04-03-2008, 01:33 PM
Hi,

I am having my first crack at css, and I have created a layout I'm happy with, I have an externally referenced CSS sheet and through the CSS I am pulling in a background image. Everything works fine when I am working off my hard drive, when I upload to my ftp server, the image wont load but the rest of the css elements (text formatting, etc..) will load just fine. When I type in the url for the image into my browser, I can load it, but when I load my homepage, nothing. I'm really confused now. I've tried everything, and now I dont even know what worked and what didnt! I cant even get it to work on my hard drive anymore! :S

This is from the css sheet:

body {
background: #FFFFFF url("background2.png") no-repeat 50% 5;
background-attachment: scroll;
margin: 0;
padding: 0;
text-align: center;
}

This is from the html:

<link rel="stylesheet" type="text/css" href="big.css"/>

The html, the css, and the image are in the root folder on my ftp site.

Any ideas?
bigmedia
04-03-2008, 01:47 PM
Ok, so I got it working on my hard drive again.

I went back to my original configuration when it was working so now I have a file structure on my ftp server like this:

root
styles
img

the index.html is in the root folder, the css is in the styles folder, and the image in the img folder.

So now my code looks like this:

This is from the css sheet:

body {
background: #FFFFFF url("img/background2.png") no-repeat 50% 5;
background-attachment: scroll;
margin: 0;
padding: 0;
text-align: center;
}

This is from the html:

<link rel="stylesheet" type="text/css" href="styles/big.css"/>

That should work right!? BUT IT DOESNT! :'( I'm losing my hair now!
DesignVHL
04-03-2008, 06:24 PM
Try changing this:

background: #FFFFFF url("img/background2.png") no-repeat 50% 5;

to this:

background: transparent url("img/background2.png") no-repeat;

Double check all your linked paths and make sure that is all correct - and files are placed where they should be.

If that background code suggestion doesn't work. you may need to put a ..img/background2.png instead of just img/background....if that still doesn't work, can you post a link to the actual html file so I can view the code directly?
bigmedia
04-03-2008, 06:43 PM
ok, I'll give it a whirl.

here's the page: www.bigmediadesign.com
Drazan
04-03-2008, 06:51 PM
background: #FFFFFF url("img/background2.png") no-repeat 50% 5;

It's your directory location that's being goofy. the css will look for things in relative to where it is located.

So in the example you provided it thinks that your image is located in (styles/img/background2.jpg).

So you can do a couple things.

background: #FFFFFF url("/img/background2.png") no-repeat 50% 5;

adding the slash at the beginning makes it look to the hosting root folder first,


background: #FFFFFF url("../img/background2.png") no-repeat 50% 5;

adding the ../ tells the css to start looking one directory above where it's located.


hope that helps.
Jade
shalom_m
04-03-2008, 08:33 PM
Have a look at your HTML

<body class=">
bigmedia
04-04-2008, 08:05 AM
Thanks for all the help guys, I managed to get it working this morning after a nice sleep. Most of the things you picked up on here were mistakes made through frustration and confusion! haha So I put all those right, and then played around with a different folder structure, I dont think I understood that the css was referencing the background image from the location of the stylesheet, I thought it was relative to the html. But anyway, it's fixed now, so thank you very much! :D