Background images in Firefox

boscomilo · #1 (**permalink**) Jun 8th, 2006, 09:02

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 · #2 (**permalink**) Jun 8th, 2006, 12:27

Your page has 35 validation errors.

I suggest you start by fixing those.

boscomilo · #3 (**permalink**) Jun 8th, 2006, 15:12

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

The problem still exists.

mattdetails · #4 (**permalink**) Jun 9th, 2006, 01:41

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: Select all

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 · #5 (**permalink**) Jun 9th, 2006, 06:49

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

mattdetails · #6 (**permalink**) Jun 9th, 2006, 07:27

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 · #7 (**permalink**) Jun 9th, 2006, 19:11

HTML: Select all

<!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: Select all

/* 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: Select all

width: 300px; height: 75px;

This is the width and height of the background image.

Code: Select all

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

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

Variations:

Code: Select all

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: Select all

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: Select all

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: Select all

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 · #8 (**permalink**) Jun 9th, 2006, 19:15

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: Select all

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 · #9 (**permalink**) Jun 9th, 2006, 19:17

Code: Select all

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: Select all

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: Select all

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: Select all

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: Select all

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 · #10 (**permalink**) Jun 9th, 2006, 22:56

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

Regards
Boscomilo

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Is it possible to have 2 background images?	lmc148	Web Page Design	8	Jun 17th, 2008 01:46
how can I tile 2 background images one on top of another?	oneup	Web Page Design	2	Feb 18th, 2008 19:11
[SOLVED] Background Images	admiral1977	Starting Out	6	Oct 29th, 2007 15:31
Disappearing Background Images (IE6)	kidreapertronV	Web Page Design	14	Jun 8th, 2007 16:45
Cant Get CSS background images to show up	mschroeder	Web Page Design	3	Jan 18th, 2007 13:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Background images in Firefox