Sat, 2005-07-16 23:22
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
Sat, 2005-07-16 23:25
#1
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');
}
Sat, 2005-07-16 23:35
#2
Problem with getting background to show up in browser
Dump the single quotes and see how it goes.
Sun, 2005-07-17 03:31
#3
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?
Sun, 2005-07-17 03:40
#4
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
Sun, 2005-07-17 05:42
#5
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
Sun, 2005-07-17 10:35
#6
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?
Sun, 2005-07-17 11:28
#7
Problem with getting background to show up in browser
Tested with Internet Explorer and Firefox on WinXP and got the same problem. Ideas?
Sun, 2005-07-17 11:33
#8
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)
Sun, 2005-07-17 12:54
#9
Problem with getting background to show up in browser
Show a live link and let me have a go.
Sun, 2005-07-17 12:55
#10
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>
Sun, 2005-07-17 13:38
#11
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.
Sun, 2005-07-17 20:16
#12
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
Sun, 2005-07-17 20:30
#13
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.
Sun, 2005-07-17 20:41
#14
Problem with getting background to show up in browser
Mon, 2005-07-18 00:14
#15
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