Hi All,
I have a template. I run it and when I use edit css (web developer) in firefox 15, this tempate is working normally. But when I don’t use edit css, background image of some parts (dairy, bakery, meats …) is disappear:
Do you know why? Any help would be much appreciated.
Can you post a link to your site? We need to see the code to know what’s going on.
Otherwise, all we can suggest is that you check your file paths etc.
Sorry! I forgot. I will post my code now. Let’s help me.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/affablebean.css" />
<title>Affable Bean</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="headerWidget">
[language toggle]
</div><!-- end .headerWidget -->
<div class="headerWidget">
[cart]
</div><!-- end .headerWidget -->
<a href="#">
<img src="img/logo.png" id="logo" alt="Affable Bean logo" />
</a>
<a href="#">
<img src="img/logoText.png" id="logoText" alt="the affable bean" />
</a>
</div><!-- end #widgetBar -->
</div><!-- end #header -->
<div id="indexLeftColumn">
<div id="welcomeText">
<p>[welcome to my shop]</p>
</div><!-- end #welcomeText -->
</div><!-- end #indexLeftColumn -->
<div id="indexRightColumn">
<div class="categoryBox" id="logoProduct1">
<a href="#">
<span class="categoryLabelText">dairy</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
<div class="categoryBox" id="logoProduct2">
<a href="#">
<span class="categoryLabelText">meats</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
<div class="categoryBox" id="logoProduct3">
<a href="#">
<span class="categoryLabelText">bakery</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
<div class="categoryBox" id="logoProduct4">
<a href="#">
<span class="categoryLabelText">fruit & veg</span>
<img src="img/layer.png" alt="" />
</a>
</div><!-- end .categoryBox -->
</div><!-- end #indexRightColumn -->
<div id="footer">
<hr />
<p id="footerText">Contact © 2012 KTPM-K4 </p>
</div><!-- end #footer -->
</div><!-- end #main -->
</body>
</html>
CSS
/**** MAIN SETTING ****/
body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
color: #444;
}
hr {
border: 0;
background-color: #333;
height: 1px;
}
table {
margin: 0 20px;
border-spacing: 0;
text-align: center;
border: solid 1px #f5eabe;
}
a {
color: inherit;
text-decoration: underline;
}
a:hover { text-decoration: none }
a:visited { color: inherit }
img { border: none }
input, select { margin: 5px }
li { margin: 10px 0 }
label { line-height: 30px }
label.error {
font-size: smaller;
line-height: 20px;
font-style: italic;
}
/* general styles */
#main { background: #f7f7e9 }
#singleColumn {
margin: 20px 30px;
text-align: left;
}
.lightBlue { background-color: #edf8f7 }
.white { background-color: #fff }
.bubble {
font-weight: bold;
background-color: #f5eabe;
padding: 5px;
color: inherit;
display: inline;
border-radius: 4px;
}
.hMargin { margin: 0 30px }
.smallText { font-size: small }
.reallySmallText { font-size: xx-small }
.header {
background-color: #c3e3e0;
height: 30px;
}
.error {
color: #c00;
font-style: italic;
}
.tableHeading {
font-weight: bold;
background-color: #edf8f7;
}
/**** END MAIN SETTING ****/
/* styles for elements contained in the header, i.e.,
shopping cart widget, language toggle, and logo */
#header {
width: 850px;
height: 250px;
background: url('img/stalk.png') no-repeat 28px 28px;
}
#logo {
float: left;
margin-left: 30px;
margin-top: 30px;
}
#logoText {
float: left;
margin: 20px 0 0 70px;
/* font styles apply to text within img alt attribute */
font-family: 'American Typewriter', Courier, monospace;
font-size: 50px;
color: #333;
}
#widgetBar {
height: 50px;
width: 850px;
float: right;
}
#cart {
position: absolute;
margin: 5px 0 0 2px;
}
.horizontalMargin {
margin-left: 28px;
margin-right: 5px
}
#viewCart {
text-align: left;
width: 210px;
}
.headerWidget {
width: 194px;
margin: 20px 0;
font-size: small;
float: right;
line-height: 25px;
}
/* footer styles */
#footer {
height: 60px;
width: 350px;
clear: left;
}
#footerText { margin-top: 5px }
/* index page styles */
#indexLeftColumn {
text-align: left;
height: 400px;
width: 350px;
float: left;
}
#indexRightColumn {
text-align: left;
height: 400px;
width: 500px;
float: left;
}
#welcomeText {
margin: 30px 5px 0 30px;
line-height: 1.4em;
}
.categoryBox {
height: 176px;
width: 212px;
margin: 21px 14px 6px;
float: inherit;
border-radius: 15px;
}
#logoProduct1 {
background-image: url('img/categories/dairy.jpg');
background-repeat: no-repeat;
}
#logoProduct2 {
background-image: url('img/categories/meats.jpg');
background-repeat: no-repeat;
}
#logoProduct3 {
background-image: url('img/categories/bakery.jpg');
background-repeat: no-repeat;
}
#logoProduct4 {
background-image: url('img/categories/fruit & veg.jpg');
background-repeat: no-repeat;
}
/* Safari - disables underline for category boxes on index page */
.categoryBox a { text-decoration: none }
.categoryLabel {
position: absolute;
background-color: #fff;
opacity: 0.7;
height: 40px;
width: 210px;
margin: 2px;
}
.categoryLabelText {
position: absolute;
line-height: 150%;
font-size: x-large;
margin: 3px 10px;
}
.categoryImage {
padding: 1px;
border:solid 1px #555;
}
Thank for watching!
Hi,
You are searching for your background images in this location:
css/img/categories/fruit & veg.jpg
Is that correct? Do you have images folders inside your css folder?
You probably should be coming back out of the css folder like so.
background-image: url(../img/categories/fruit & veg.jpg);
the …/ will bring you out of the css folder which I suspect is where your img folder resides.
An easy way to check if an image exists is simply to type the address in the address bar (e.g. http://www.pmob.co.uk/pob/images/logo-new.jpg). If the image doesn’t show then it’s likely you have the wrong path or the image hasn’t been uploaded where you think it has.
BTW is not a good idea to have spaces and other odd characters in your filenames. Use a hyphen fruit-and-veg.jpg etc.
Hi,
I have “images folders”. When I select edit css on web developer, background is working normally . But when I turn off it, background is disappear. I don’t know why, it’s strange.
This problem only happens when I put the files (css, html, folders images) into server (xampp) or running html with asp code. At the first time running html (if I don’t put them into any server), no problem happen.
Ignore edit css it is just getting in the way and confusing things as it creates its own path to files. Quite often when you use edit css the images disappear because it loses track of where they are. If you are not seeing the image when running the file natively in the browser then it will be a path issue as I indicated before or a setup issue with xampp.
It seems strange that you have an img folder inside your css folder yet you clearly also have an img folder outside your css folder as well (as seen from the html image paths). (Although I know some people like to create image folders in their css as well but it would be better to keep them all in the same place.)
Setting up xampp is not really a css question and it seems that you haven’t created the right structure to run locally. I can move the thread if this is the issue to a more suitable forum.
Oh! Sorry. I will not metion about xampp in here. Come back with my problem, you are right. I added img folder into css folder. How strange it is! Things are normally. I don’t want to put img folder into css folder, it means that I’m only have three parts (no image folder in css folder). These are css folder, img folder, index.html. So how do I repair my code?
Read Paul’s message #4 again. He describes exactly how to code the path to the images on your css sheet.
Restated:
In your CSS sheet,
Line 181
#logoProduct1 {
background-image: url('img/categories/dairy.jpg');
background-repeat: no-repeat;
}
should read
#logoProduct1 {
background-image: url('[COLOR="#FF0000"]../[/COLOR]img/categories/dairy.jpg'); /* notice the [COLOR="#FF0000"]../[/COLOR] leading the path? */
background-repeat: no-repeat;
}
Repeat this change on the css sheet for all of the images that are missing,
see Lines 95, 186, 191, 196.
Also, rename the image “fruit & veg.jpg” to “fruit-and-veg.jpg” or something without spaces.
Once again, thank so much! I will repair them now.