Background images in Firefox

boscomilo · June 8th, 2006, 05:02 AM

After many different problems, i'm finally getting somewhere. However, I can't get background images to display in FF. They work fine in IE.

http://www.usdmanciano.com/test.html

The css is as follows:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(/image files/Logobg.gif);
background-position: 1cm 5cm;
background-repeat: no-repeat;
}

.menubutton {
background-image: url(/image files/button.gif);
margin-top: 4px;
margin-left: 0px;
height: 22px;
width: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
text-align: left;
text-indent: 8px;
}
Any ideas?

ukgeoff · June 8th, 2006, 08:27 AM

Your page has 35 validation errors.

I suggest you start by fixing those.

boscomilo · June 8th, 2006, 11:12 AM

The errors are because of a cut and paste swf, which I've taken out.

The problem still exists.

mattdetails · June 8th, 2006, 09:41 PM

which set of code is the images not working?

Although, I dont have much experience using CM for a unit in positioning images, I would however consider using something that does officially work well in FF like pixel (px). So my suggestion is, to narrow down the problems, try doing this.

Code:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-image: url(image files/Logobg.gif);
 background-position: 1px 5px;
 background-repeat: no-repeat;
}

I also believe that when you point to a local folder, that a / before the folder name will not let an image display. If you copy and paste the code into your css file, it should work fine.

Good luck!

boscomilo · June 9th, 2006, 02:49 AM

I used px previously and switched to cm in attempting to make it work. Also tried percentages. No joy!

mattdetails · June 9th, 2006, 03:27 AM

One of the techniques I try doing is taking out all the extra stuff you dont need, and testing the problem solo in a test file. Then test all your basic CSS things, like including the css file into the html file correctly. Simple things like commas, and periods, and spelling. Checking over all the little "basic" things that could cause a problem.

Eventually you'll narrow down the problem.

I'll have a full fledge example, with the code, and multiple real-world solutions to your problem tomorrow before noon central time.

Its 2:30 am central right now, and I just got back from downtown chicago, so I'll be sure to finish this example tomorrow. Hang in there mate!

mattdetails · June 9th, 2006, 03:11 PM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/1">
<title> Testing background images in firefox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
</head>
<body>

<h1>Background using Class</h1>
<div class="background1">
1) This has a background.
</div>

<h2>Background using ID</h2>
<div id="background2">
2) This has a background too.
</div>


</body>
</html>

I think the HTML part is pretty self-explanatory, but if anyone would like me to explain any parts of the HTML, just let me know.

Code:

/* DEFAULT FORMATTING
--------------------*/

        body { padding: 0px; margin: 0px; border-top: 2px #555 solid; background: #FFF url(../images/main_bg.gif) 0 0 repeat-x; }
        a:link, a:visited { color: #C10000; text-decoration: none; font: bold 12px/15px "Lucida Grande","Lucida Sans Unicode","Trebuchet MS",sans-serif; }
        a:hover { color: #E50F0F; text-decoration: none; font: bold 12px/15px "Lucida Grande","Lucida Sans Unicode","Trebuchet MS",sans-serif; }
        
/* OVERALL LAYOUT
------------------*/

        /* MAIN DESIGN ELEMENTS
        ----------------------------*/
        
        .background1 { width: 300px; height: 75px; margin: 10px; padding: 30px; background: url(../images/bg2.gif) 0 0 no-repeat; font: normal 12px Arial, sans-serif; color: #FFF; }
        #background2 { width: 300px; height: 75px; margin: 10px; padding: 30px; background: url(../images/bg1.gif) 0 0 no-repeat; font: normal 12px Arial, sans-serif; color: #555; }
        
        h1,h2 { margin: 15px; padding: 0px; font: bold 15px/19px Arial, sans-serif; color: #555; }

Explanation

.background1 - is the class div in the html
#background2 - is the ID div in the html

Code:

width: 300px; height: 75px;

This is the width and height of the background image.

Code:

background: url(../images/bg2.gif) 0 0 no-repeat;

Background: (bg color) (img url) (positioning) (repeating)

Variations:

Code:

background: url(../images/bg2.gif) left center repeat-x;

This puts the bg2.gif image repeating horizontally across the screen, starting at the left center position.

Code:

background: #FFF url(../images/bg2.gif) 0 0 repeat-y;

This puts a white bg color behind the image bg2.gif that repeats vertically down the screen.

I know that font didn't have anything to do with your question, but since I use it all the time, I thought I'd explain it here too.

Code:

font: normal 12px/19px "Arial", sans-serif;

Font: (font style) (font size)/(line height) (font family);

Its important that you end all your font families with sans-serif, because its the most commmonly used font family across any platform/browser.

Variations:

Code:

font: bold 12px/18px Arial, sans-serif;

This creates bold text, at 12 pixels, with 18pixel line height, using Arial.

Alright, I think I've explained the code you see above.

Here is the example link:

http://www.designbyinc.com/misc/bg_img_test/index.php
http://www.designbyinc.com/misc/bg_i...css/screen.css
http://www.designbyinc.com/misc/bg_i...images/bg1.gif
http://www.designbyinc.com/misc/bg_i...images/bg2.gif
http://www.designbyinc.com/misc/bg_i...es/main_bg.gif

Well, sorry for the really lengthy post, but hopefully it'll teach you a couple new things, and hopefully fix your background problems also!

mattdetails · June 9th, 2006, 03:15 PM

One side note:

If you dont have a background image repeat, and dont define a width/height of the background image, you need to put "display: block;" at the end.

Code:

P { background: transparent url(../images/bg1.gif) 0 0 no-repeat; display: block; }

This would be used if you were adding a background image to a block element like the <p> tag.

mattdetails · June 9th, 2006, 03:17 PM

Code:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-image: url(/image files/Logobg.gif);
 background-position: 1cm 5cm;
 background-repeat: no-repeat;
}

Should be

Code:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-image: url(/image files/Logobg.gif);
 background-position: 1cm 5cm;
 background-repeat: repeat-x;  /* Repeats x axis */
}

or

Code:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-image: url(/image files/Logobg.gif);
 background-position: 1cm 5cm;
 background-repeat: no-repeat;  /* Doesnt repeat, but has defined width/height */
width: 100px;
height: 200px;
}

or

Code:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-image: url(/image files/Logobg.gif);
 background-position: 1cm 5cm;
 background-repeat: repeat-y; /* Repeats y axis */
}

or

Code:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-image: url(/image files/Logobg.gif);
 background-position: 1cm 5cm;
 background-repeat: repeat;  /* Repeats both x and y axis */
}

boscomilo · June 9th, 2006, 06:56 PM

Wow. Thanks for all your effort. I'll try your suggestions and let you know.

Regards
Boscomilo