Background image shows in PC, but not online

background image problem

[dgwweb62]

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]

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]

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]

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!