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
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
system
March 16, 2011, 7:57pm
3
Actually, is not correct now either. You need some more deceleration on your color.
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.
PaulOB
March 17, 2011, 4:04pm
4
capples3:
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
Actually the bug has nothing to do with that at all
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.
system
March 17, 2011, 5:18pm
5
As always, nice to have Paul around.