Can't display CSS Background-images on Firefox or palemoon

clarisse88 posted this at 06:32 — 16th April 2012.

They have: 1 posts

Joined: Apr 2012

Hello everybody! I am new in this forum...

I am trying to pull up a CSS background image on a web page. It works on IE, on Google Chrome... but it doesn't work on Firefox nor Palemoon, and I just can't figure out what the error is. I would very much appreciate an answer! thanks

These are the too codes that I am using (please, note that I am using local images).

CODE 1

<em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
</style>
</head>
<body>
<img src="c:/temp/lucia.jpg" class="bg">
<div id="page-wrap">
</body>
</html>
</em>

CODE 2

<style type="text/css">

body{background-image: url('c:/temp/lucia.jpg');}

</style>

- Clarisse.

Megan posted this at 01:31 — 17th April 2012.

She has: 11,421 posts

Joined: Jun 1999

Well, the code that's calling the background image (CODE 2) is looking for a file on your computer's hard drive (c:/temp/lucia.jpg). This certainly won't work when you upload the file to a server. I haven't tried it before but maybe some browsers can't handle that at all.

In any case, it's best to put in background images as a relative path (e.g. ../images/lucia.jpg) rather than a hard link to a file on your computer. Full URL's will also work, but might break if the site structure changes.

Megan
Connect with us on Facebook!