In the past when working with CSS I would use the background-image property to display an image for a logo, I did this because if I needed to change it I could do so in the style sheet, rather than going into the html and adding a img tag to each page. I was attempting to do that today, but for some reason it wouldn't show, but when I opened the css editor in firefox it would pop up inside the bordered element, WTF has anyone else had this happen. Anyways I got pissed off and did a workaround with javascript.
CSS Glitch
- Thread starter CaviB
- Start date
ok here it is
#tableheader
{
border: #CC2A09 dotted 3px;
position:absolute;top:15px; left:200px;
background-image:url("http://www.wickedfire.com/images/logo.jpeg");
background-repeat:no-repeat;
width:498px;
height:51px;
and this is the element I want it displayed in. <div id="tableheader">
</div>
#tableheader
{
border: #CC2A09 dotted 3px;
position:absolute;top:15px; left:200px;
background-image:url("http://www.wickedfire.com/images/logo.jpeg");
background-repeat:no-repeat;
width:498px;
height:51px;
and this is the element I want it displayed in. <div id="tableheader">
</div>
Last edited:
Well, http://www.wickedfire.com/images/logo.jpeg doesn't exist...
If you link to an existing image then it should show up, cause your code works fine.
If you link to an existing image then it should show up, cause your code works fine.
Lolz. Pretty sure that wasn't his actual image.
Anyways, can you see the border and not the logo? Or are neither displaying?
Anyways, can you see the border and not the logo? Or are neither displaying?
In that case, he should post the rest of his code, because what he did post works fine. It could be that some other css is interfering.
Here is the whole CSS File
And yes the border did show, but no image , the image only appeared when I opened the firefox css editor
And yes the border did show, but no image , the image only appeared when I opened the firefox css editor
Code:
/*CSS Site layout*/
/*margin-top in body controls table header*/
body {
width:840px;
height:700px;
margin-bottom:100px;
margin-top:auto;
background-repeat:repeat-y;
}
/*this is the code that is giving me trouble and I tried other images just to make sure and had the same result*/
#tableheader
{
border: #CC2A09 dotted 3px;
width:790px;
height:140px;
background-image:url("http://www.wickedfire.com/images/logo.jpeg");
background-repeat:no-repeat;
position:absolute;top:30px; left:200px;
}
#menu
{
background-color:#E1EFEF;
border: #CC2A09 dotted 3px;
position:fixed; top:3%; left:1%;
width:160px; height:508px;
clear:none;
}
/*
img.wm{z-index:-1;}
*/
#menulinks{font-size:14pt;}
#menulinks{padding-top: 10px;}
#menulinks
{
position:fixed; top:3%; left:3%;
clear:none;
/*float:right; */
line-height:27px;
z-index:1;
}
/****linking pseudo classes*****/
#menulinks a:link {color:black}
#menulinks a:visited{color:#993333}
#menulinks a:hover
{
background-color:white;
}
#menulinks a:active
{
font-style:oblique;
}
/****end of link pseudos*****/
#content
{
margin-top:auto;
margin-left:auto;
padding-top:50px;
position:absolute; top:150px; left:30%;
clear:none;
width:400px
}
#privacy
{
position:relative; top:385%; left:30%;
clear:both;
text-align:center;
/*border: 4px solid red;*/
width:425px; height:150px;
text-decoration:underline;
}
/**disclosure link styles**/
#dynalink
{
font-style:italic;
font-size: 10pt;
text-align:center;
}
#footer
{
padding-top:15px;
padding-bottom:50px;
padding-left:35%;
margin-bottom:auto;
margin-top:auto;
margin-left:auto;
margin-right:auto;
clear:none;
}
table.one
{
padding-left:300px;
margin-left:210px;
}
it looks fine except don't use .jpeg - use .jpg.
/*background-image:url("-/images/logo.jpeg");*/ << Try hardcoding there too not just images/.. but http:// and don't use jpEg.
Perhaps it's only opening locally (not sure what firefox editor is/does), and the image actually isn't on the server, or is a different name, or has been moved. Linking to an image should be a piece of cake and it's probably a simple solution you're overlooking, and my guess is it's either the image is NOT there, or your path is wrong re .jpEg or hardcoding vs. local linking... When you upload the new code, and go to a browser to look at it - always CTRL+F5 to re-fresh and clear cache - also just try typing your way to the image directly in your address bar. Like type in hxxp://...com/images/logo.jpg to make absolute sure the file is there and you can view it directly. **Also, when you preview the page, and you notice the logo is not there, right click on where it should be, and look at properties (or view background image, then properties), see where you're linking while in a live environment (again watch out for .jpeg).
/*background-image:url("-/images/logo.jpeg");*/ << Try hardcoding there too not just images/.. but http:// and don't use jpEg.
Perhaps it's only opening locally (not sure what firefox editor is/does), and the image actually isn't on the server, or is a different name, or has been moved. Linking to an image should be a piece of cake and it's probably a simple solution you're overlooking, and my guess is it's either the image is NOT there, or your path is wrong re .jpEg or hardcoding vs. local linking... When you upload the new code, and go to a browser to look at it - always CTRL+F5 to re-fresh and clear cache - also just try typing your way to the image directly in your address bar. Like type in hxxp://...com/images/logo.jpg to make absolute sure the file is there and you can view it directly. **Also, when you preview the page, and you notice the logo is not there, right click on where it should be, and look at properties (or view background image, then properties), see where you're linking while in a live environment (again watch out for .jpeg).