| 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!
|
|
|
