Welcome to WebmasterWorld Guest from 54.146.248.111

Forum Moderators: not2easy

Message Too Old, No Replies

Background image shows in PC, but not online

background image problem

     

dgwweb62

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

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

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

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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month