homepage Welcome to WebmasterWorld Guest from 54.226.166.224
register, free tools, login, search, pro membership, 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 shows in PC, but not online
background image problem
dgwweb62




msg:4296307
 6:00 pm on Apr 12, 2011 (gmt 0)

Site header background image shows up fine when previewing site on local PC, but does not show up when site is posted online. Tried various combinations of "background-image", vs. just "background".

Followed previous advice and changed previous occurrences of "background" to "background-color" to prevent override.

Also verified location of image in images folder, and tried placing it in the site root.

Site URL: [mysite.verizon.net...]

Here is the code:

body {
background-color:#626262;
margin:0;
padding:0;
font-family: Tahoma,Geneva,sans-serif;
font-size: 13px;
color: #fff;
}

* {
margin:0;
padding:0;
}

p {
line-height: 1.5em;
margin-bottom: 20px;
}

a {
color: #000;
}

a:hover {
color: #c0c0c0;
}

a:focus {
outline: none;
}

h1 {
color: #FF2200;
font-weight: normal;
font-size: 40px;
}

h2 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 35px;
letter-spacing: 0.5px;
font-weight: normal;
padding: 0 0 5px;
margin: 0;
}

h3 {
color: #000;
font-size: 17px;
font-weight: bold;
margin-bottom: 10px;
}

h4 {
padding-bottom: 10px;
font-size: 15px;
color: #999;
}

h5 {
padding-bottom: 10px;
font-size: 13px;
color: #999;
}

ul, ol {
margin: 0 0 35px 35px;
}

li {
padding-bottom: 10px;
}

li ol, li ul {
font-size: 1.0em;
margin-bottom: 0;
padding-top: 5px;
}

#container {
width: 960px;
margin:0 auto;
padding: 0;
background-color: #000;

}

#container-inner {
width: 920px;
margin:0 auto;
padding: 0;
background-color: #626262;
}


/*----------- Header -----------------*/
#header {
padding: 0;
margin: 0 auto;
height: 146px;
background-image:url('images/optikbanner920.jpg');
vertical-align:text-bottom;
color: #fff;
}

#header h1 {
padding-top: 15px;
padding-left: 15px;
}

#header h1 a {
font-family: Georgia, "Times New Roman", Times, serif;
color: #90DA11;
font-size: 40px;
font-weight: normal;
text-decoration: none;
}

#header p {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
margin-left: 12px;
margin-top: 0px;
padding-left: 8px;
padding-right:10px;
line-height:12px;
text-align:right;

}

#header p a {
color: #fff;
}

 

diakonos1023




msg:4296339
 7:08 pm on Apr 12, 2011 (gmt 0)

Hey dgwweb62,

I've run into this a few times myself and I know it can be frustrating. A couple of things you might try:

1) Don't put any quotes (single or double) around the image path:

background-image:url(images/optikbanner920.jpg)

- and/or -

2) Try putting a slash before the images directory:

background-image:url(/images/optikbanner920.jpg)

Depending on the web server I'm working on, I've noticed, can have an effect on the syntax...it shouldn't, but for some reason does. Hope this helps.

- diakonos1023

mbabuskov




msg:4296340
 7:10 pm on Apr 12, 2011 (gmt 0)

1. check the path to image file
2. make sure you can load the image by typing its URL directly
3. see if .htaccess prevents loading regarding to referring page

dgwweb62




msg:4296451
 9:45 pm on Apr 12, 2011 (gmt 0)

Well, I ended up needing advice from BOTH of you! I removed the quotes, and checked the link syntax by testing the image URL in the browser. Thanks!

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