Page background not showing in IE works fine everywhere else

HTML & CSS
1

Hi the dev site is Untitled Document

My background image shows up just fine in every single browser except for IE where it just give a plain white background.

here is the css

body {
	margin: 0px auto;
	font: 62.5% "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,Helvetica,sans-serif;
	background:url(../images/bg2.png)repeat-x #ddd;
}

Any ideas as to why this is going on

2

I have solved the problem already here is the answer for anyone else who has this problem in the future. You need to have your color deceleration before you have your repeat property.

body {
	background:url(../images/bg2.png) #ddd repeat-x;
	margin: 0px auto;
	font: 62.5% "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,Helvetica,sans-serif;
}

Hope this helps others

3

Actually, is not correct now either. You need some more deceleration on your color. :wink:

Using the background shorthand needs to follow the order like this:


element {
  background-color: color || #hex || (rgb / % || 0-255);
  background-image:url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

into this


element {
  background:
    #fff
    url(image.png)
    no-repeat
    20px 100px
    fixed;
}

though, as you’ve seen, browsers try to make good with a mixed up order as well.

4

Actually the bug has nothing to do with that at all :slight_smile:

The problem in IE8 and under is that when there is no space after the bracket it breaks (haven’t tested IE9 yet).


background:url(../images/bg2.png)repeat-x

Therefore for IE there must be space after the bracket like so:


background:url(../images/bg2.png) repeat-x

More info here.

I should also point out that for the background shorthand the properties can actually appear in any order (apart from inherit which should be at the end).

Value: [<‘background-color’> || [URL=“http://www.w3.org/TR/CSS21/colors.html#propdef-background-image”]<‘background-image’> || [URL=“http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat”]<‘background-repeat’> || [URL=“http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment”]<‘background-attachment’> || [URL=“http://www.w3.org/TR/CSS21/colors.html#propdef-background-position”]<‘background-position’>] | [URL=“http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit”]inherit

A double bar (||) separates two or more options: one or more of them must occur, in any order.

Most shorthand properties are like this with the notable exception of the font shorthand which has its own special rules to follow.

5

As always, nice to have Paul around. :slight_smile: