...

View Full Version : Background image not showing in internet explorer properly



robe01
06-09-2012, 06:20 PM
So I have a massive problem with making an image for my website's background be displayed in internet explorer (the worse web browser in history). My code is below and is really simple. It works in every other browser apart from IE...

<!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">


<body style="background: url('wrapper.png')">

<div >blah</div>

</body>
</html>

tracknut
06-09-2012, 09:47 PM
That's not legal code... do you have a link to the full site?

Dave

waxdoc
06-09-2012, 11:27 PM
The OLD way (pre=CSS) was to add "attributes" to opening <BODY> tag, Those attributes were
<body bgcolor="backgroundColor" background="backgroundImage" text="color" vlink-"visitedLinkColor" alink="activeLinkCoLor">

You applied the INLINE CSS attribute STYLE="using old background" instead of creating a style rule for BODY { background-image: url (...);}

The CSS properties are:
background-color:value; background-image:url(imagePath,jpg); background-repeat [repeat, no-repeat, repeat-x, repeat-y, inherit], background-attachment [scroll, fixed, inherit],
background-position [left, top, bottom, right, center, x%, y%, xPos, yPos, inherit]
color:textColor; etc.

If you are only specifying the image, it needs to be background-image; See for instance, http://www.w3schools.com/css/css_background.asp


To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}

When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

Or http://www.w3schools.com/cssref/css3_pr_background.asp for CSS3



Description CSS
background-color Specifies the background color to be used 1
background-position ... position of the background images 1
background-size ... size of the background images 3
background-repeat ... how to repeat the background images 1
background-origin ... positioning area of the background images 3
background-clip ... painting area of the background images 3
background-attachment ... whether background images are fixed or scrolls 1
background-image ... ONE or MORE background images to be used 1

Lerura
06-10-2012, 01:15 AM
That's not legal code... do you have a link to the full site?

Dave
What make you say that it isn't LEGAL code.

tracknut
06-10-2012, 01:21 AM
What make you say that it isn't LEGAL code.

When you run it through the validator, it doesn't validate.

Dave

Lerura
06-10-2012, 02:41 AM
Well in this case it is not because the code is not legal.
But because the document lacks the required <head> with a <title>.

tracknut
06-10-2012, 03:58 AM
Well in this case it is not because the code is not legal.
But because the document lacks the required <head> with a <title>.

I will not argue the subtle semantics of the English language with you :)

Dave

Lerura
06-10-2012, 05:09 AM
I will not argue the subtle semantics of the English language with you :)
Dave

This have nothing to do with the semantics of the english language.
It is a matter of distinguishing between WRONG code and MISSING code.

Telling that there is something wrong, do not help the OP. unless you in some way try to clarify what is wrong.

Just as you won't be able to answer to "which of these colors are the darker one", if I do not tell you which colors I am refering to.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum