homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
background-image not showing up
sturmgeshutz




msg:4427586
 7:08 pm on Mar 10, 2012 (gmt 0)

I'm new to web design and currently taking it in college.

i don't understand why my background image won't show up from the internal method but shows up from in the inline method.

here is the css:

body { background-image: url("skystrip.gif");
font-family: sans-serif;
font-size: 10px;
}

It validated ok with w3s.

 

londrum




msg:4427592
 7:44 pm on Mar 10, 2012 (gmt 0)

its probably something to do with the URL. is the image in the same directory as the html file? that would work okay for the inline method.
but if you try it with a css file, then the way you've got it written at the moment, the image would have to be in the same directory as the css file.

try changing
background-image: url("skystrip.gif");
to
background-image: url("/directory/skystrip.gif");
or wherever it is that the image is stored

lucy24




msg:4427636
 9:54 pm on Mar 10, 2012 (gmt 0)

but if you try it with a css file, then the way you've got it written at the moment, the image would have to be in the same directory as the css file.

Other way around. Relative links in external css are treated as relative to the file that uses the css, not to the css itself.

I only know this because I've gone through the "get it wrong + test it" loop about eight times in the past year. Ahem.

Site-absolute links are guaranteed to work correctly. The drawback is that you can't test them locally except by installing a pseudo-server like MAMP or WAMP. (And then jumping through further hoops if you're testing more than one domain.)

Marshall




msg:4427657
 11:31 pm on Mar 10, 2012 (gmt 0)

Other way around. Relative links in external css are treated as relative to the file that uses the css, not to the css itself.


I must disagree. Images are relative to the CSS file, not the page.

Marshall

sturmgeshutz




msg:4427681
 12:36 am on Mar 11, 2012 (gmt 0)

The image is in the same directory as the index file.

lucy24




msg:4427699
 2:12 am on Mar 11, 2012 (gmt 0)

I must disagree.

###. You're right. Tested all three ways: online, offline, and with pseudo-server.

###

This makes me uneasy about the configuration of the previous 8 tests. Can we all agree that site-absolute links are safe?

sturmgeshutz




msg:4428349
 12:06 am on Mar 13, 2012 (gmt 0)

Does anybody have any other suggestions?

lucy24




msg:4428358
 12:22 am on Mar 13, 2012 (gmt 0)

To confirm: The page, the external css and the image are all three in the same directory?

rocknbil




msg:4428670
 4:45 pm on Mar 13, 2012 (gmt 0)

The image is in the same directory as the index file.


But where is the CSS?

The image must be relative to the location of the CSS. So if you have

index.html
css/style.css
images/myimage.jpg

you must do this in your document,

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

... and this in your CSS.

background:url(/images/myimage.jpg);

The leading slash means "start at the domain root." It's a good habit to form early. Note that this will NOT work if you're previewing on your local computer because your local computer is not a web server and doesn't have a "domain root" (unless you add server software to it.) Using the above directory structure, you'll have to do

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

background:url(../images/myimage.jpg);

This will work in both cases, so what's the difference? When you get into large web sites and begin URL rewriting, it will become painfully apparent that the document-relative syntax will get very difficult to maintain. IF you always start at domain root, it's one less thing to worry about.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved