CODEWITHSUNDEEP
htmlcssfirefoxbackground
Mr.B
Mr.B

Reputation: 43

Body background doesn't work in FireFox

I've used the following code for background image of body tag.

background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

it works in IE,Opera and chrome but doesn't work in FireFox. I've tried also :

background-image: url("images/taling.gif");

and

background-image: url('images/taling.gif');

but it doesnt work on FireFox

Upvotes: 0

Views: 3706

Answers (3)

Pegues
Pegues

Reputation: 1783

There is no problem with your CSS. What the problem is most likely the result of is either you are not assigning a width and height to the body tag, you are naming your image incorrectly, using the incorrect extension for your image, or the path to your image is incorrect, but there is also a possibility that you need to add a width and height.

If you use Firefox, you can test what is going on by using Firebug. You right click, and choose inspect element. Once done, in the right column of Firebug, you can see your declaration for background-image. If it says image not loaded or cannot be found, then one of the three things I pointed out above is the problem.

I know you said that the image does show up in other browsers, just not in Firefox. So, consider some modifications to the rest of your CSS. You may not be specifying a browser reset.

Just FYI, you can condense your CSS by doing the following:

background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;

to

background: #2e2e2e url(images/taling.gif) repeat-x;

As for the body tag, you may want to add these properties and values:

margin: 0;
padding: 0;
width: 100%;
height: 100%;

Google "CSS browser reset"

One example of a browser reset is the following:

html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}

The above is the most simple browser reset you can have. It does not take into account ul,ol,li,h1,h2,h3,h4,h5,h6,li,p,a,img,blockquote, etc.

Also, look into using a clearfix.

I could ramble on and on as to why you may be having this problem.

I hope that helps.

Upvotes: 2

Philippe
Philippe

Reputation: 9752

Try:

background: url('yourimage.ext') repeat-x;

It works for me.

Edit: to match what you're doing, it should in fact be:

background: #2E2E2E url('images/taling.gif') repeat-x;

Upvotes: 1

Bernat
Bernat

Reputation: 1556

your document body is height=0, and width=0, if you try to give it some height or width the image should be displayed

Upvotes: 2

Related Questions