PDA

View Full Version : External style sheet not working correctly.



RiseRobotRise
Jan 17th, 2007, 12:09 AM
okay, so I have this problem.

I can't get my background image to work properly. The background color works, margin, padding, etc, works when I change the variable. However, if I include the css into the html document as an embedded style sheet, everything works fine.

I don't get.

Okay, so here is the code for my external style sheet.


/* This is the style sheet for the main page*/
/* http://www.example.com/ */


body {

background-color:#fff;
background-image: url('background.jpg');
background-repeat: no-repeat;
margin:60px;
padding:20px;
}


Like I said before, when I manipulate the variable for the background color, the margin, and padding, it works. The background image, not at all. I copied the exact code into the html document as an embedded style sheet, and the background image shows up. I don't get it.:confused:

VIPStephan
Jan 17th, 2007, 12:26 AM
Where is your image stored? Note that paths from an external stylesheet must be relative to the stylesheet itself, not the HTML document. That means if you have the stylesheet in a subdirectory you would refer to an image in the root directory like so:


background: url(../image.png);

The "../" means that the browser must look one level above the current directory (where the stylesheet is stored).
If the image is stored in a separate sub directory too the reference would look like this:


background: url(../images/image.png);

That means "go one level up and there look into the 'images' directory".

RiseRobotRise
Jan 17th, 2007, 12:33 AM
Where is your image stored? Note that paths from an external stylesheet must be relative to the stylesheet itself, not the HTML document. That means if you have the stylesheet in a subdirectory you would refer to an image in the root directory like so:


background: url(../image.png);

The "../" means that the browser must look one level above the current directory (where the stylesheet is stored).
If the image is stored in a separate sub directory too the reference would look like this:


background: url(../images/image.png);

That means "go one level up and there look into the 'images' directory".

Heym, you're right, it worked. I never knew that about external sheets. Thanks alot!