15 replies [Last post]
Bugsi
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2005-07-16
Posts: 8
Points: 0

I'm totally new to CSS, and I've searched lots of forums and tutorials, but I can't figure out this problem I'm having. It's *very* simple.

All I want to get past is getting a background image defined in my CSS page that will show up on my web pages. If my CSS looks like this:

<style type="text/css">
body
{
background:
url('bg.gif')
}
</style>

Then I *DO NOT* get my background image "bg.gif" when I view my page. But if I include one or more extra "body{}" lines like this:

<style type="text/css">
body{}
body
{
background:
url('bg.gif')
}
</style>

. . .then the background image shows up just fine.

I'm testing with this as my web page:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
</body>
</html>

Using MacOS X 10.3.9 with Safari 1.3 and Firefox 1.0

I don't get it. Help!
-Mark

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem with getting background to show up in browser

body
{
background:
url('bg.gif')
} 

The url should be on the same line as background with a semi-colon at the end:

body
{
background: url('bg.gif');
} 

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Problem with getting background to show up in browser

Dump the single quotes and see how it goes.

Bugsi
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2005-07-16
Posts: 8
Points: 0

Problem with getting background to show up in browser

Still no luck, I fixed up those things, but those were never the problem.

The problem is that the background info in the "body {...}" tag only works if the "body {...}" tag is itself preceded by an extra "body { }" tag.

Even now, to get it to work, my script must look like this:
<style type="text/css">
body{}
body
{
background:url(bg.gif);
}
</style>

Instead of like this:
<style type="text/css">
body
{
background:url(bg.gif);
}
</style>

I simply don't understand why I don't get the background with the script immediately above, but I do with the one on top, with the extra "body{ }" tag.

Help?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Problem with getting background to show up in browser

I recently saw somewhere, perhaps css-d—you might search their archives, about a set of conditions that caused some browser to ignore the first style rule. I recall a solution of doing about what you've done: * {line-height: inherit;}. Since that's the default value, nothing is harmed and over-rides occur normally. I don't know whether there was a fix, or just that work-around.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Problem with getting background to show up in browser

Hi Bugsi,
background is a CSS Shortcut for:
background-color
background-repeat
background-image
background-position
background-attachment.

When using some CSS Shortcuts, border is a good example, it is recommended that you supply all the attributes or some browsers will mess up.
Background may require all or more of the attributes.

Try using background-image:url(bg.gif);

Hope that helps

Bugsi
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2005-07-16
Posts: 8
Points: 0

Problem with getting background to show up in browser

Okay, really, thanks to everyone who keeps suggesting I change the line that includes the background part, but to be really clear on this: I get the background JUST FINE so long as I have ONE or MORE extra "body{}" tags IN FRONT OF the body tag that includes the background data. So to take the last suggestion:
<style type="text/css">
body{}
body
{
background-image:url(bg.gif);
}
</style>

Works, but...
<style type="text/css">
body
{
background-image:url(bg.gif);
}
</style>

...does not work. Note that this has NOTHING to do with the formatting of the background info. I'm seeing this with every web browser I can muster in MacOS X: Internet Explorer, Safari, and Firefox. I haven't tried it yet on Windows, but I will.

I've tried to make this really simple to reproduce, I've removed everything else, there's no other content in either the web page or the css file. From the few sources of CSS info I've read, I don't think I should need an extra "body{}" tag to get a background to display, but nevertheless, that seems to be the case. Ergo, my questions are:
(1) Does this happen for anyone else? (Is it common, or is it just me?)
(2) Is there any explanation for why adding one or more extra "body{}" tags makes the whole shebang work?

Thanks so far to kk5st who understood this isn't a problem with formatting the background info. (Hoping more people go in that direction.)

Help?

Bugsi
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2005-07-16
Posts: 8
Points: 0

Problem with getting background to show up in browser

Tested with Internet Explorer and Firefox on WinXP and got the same problem. Ideas?

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 7 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Problem with getting background to show up in browser

could this perhaps be a mac issue / bug??? can't replicate in windows.

(although it would be strange in ALL browsers in mac to be consistent)

Anonymous
Anonymous's picture
Guru

Problem with getting background to show up in browser

Show a live link and let me have a go.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 16 years 3 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Problem with getting background to show up in browser

Bugsi, I tested ie 6 and firefox 1.04 on winxp sp2 with this exact code and it resulted in blx2.gif repeated on both displays (sample attached):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>background test</title>
<style type="text/css" media="screen">
body {background-image: url(blx2.gif);}
</style>
</head><body></body></html>

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Problem with getting background to show up in browser

Hi Bugsi,
You shouldn't need to use body{} in front of the other style rule.
There must be something wrong with the page or the server possibly mime type of the css file.
Please provide a link so we can do more then guess.

Do you know not to use the tags <style type="text/css"> and </style> in your stylesheet.

Bugsi
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2005-07-16
Posts: 8
Points: 0

Problem with getting background to show up in browser

No, I'm not aware to not use those tags, can you give me more info on that please? I've attached a zip file, it has three files in it: The test html file, the css file, and the background gif. Please note: This stylesheet DOES have the EXTRA body tag, and this is the one that WORKS for me. If I remove the first body tag, then I get a web page with a blank white background. I've isolated the html and css files down to the bare minimum, there's really no other content.
-Mark

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 16 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Problem with getting background to show up in browser

As Tony has guessed, you need to remove the <style type="text/css"> and </style> from your stylesheet. They don't belong there. They are used in head of html for internal styles. Where you have an external stylesheet, you don't need them in html either.

Also, I have also read somewhere about the first rule being ignored in certain situations - like gary pointed out above, but for the life of me can't find anything on the subject. IIRC, it had to do with commenting above the first rule.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 16 years 3 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Problem with getting background to show up in browser

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Bugsi
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2005-07-16
Posts: 8
Points: 0

Problem with getting background to show up in browser

Hey presto WOW!
I remove the "<style type="text/css"> and </style>" from the style sheet, and now I get the background fine *without* any extra "body {}
tag! So that's the ticket then? A style sheet doesn't need any specific thing to identify it as a stylesheet (other than being named with .css at the end?) That's pretty slick. Thanks for the info about that being used for *internal* styles, and not *external* styles. That is apparently the difference in this case! Thanks again to everyone who gave me info on this!

Sincerely,
-Mark