Hey,

I have the problem that my background is not available in internet explorer, the problem started when I added more than one background: what is the best way around this problem?

body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #68f72f;
        background-image: url('./images/bg/ul.png'), url('./images/bg/ur.png'), url('./images/bg/bl.png'), url('./images/bg/br.png'), url('./images/bg/flower.png'),url('./images/bg/bg.png'), url('./images/bg/bgd.png');
        background-position: top left, top right, bottom left, bottom right, center top, top left, bottom left;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;


}

http://www.freestarregister.com/chris/index.php

thanks for looking at my problem!

//Chris

You can't have more than one background image in CSS:

background-image: url('./images/bg/ul.png'), url('./images/bg/ur.png'), url('./images/bg/bl.png'), url('./images/bg/br.png'), url('./images/bg/flower.png'),url('./images/bg/bg.png'), url('./images/bg/bgd.png');

So it's not just IE, the background isn't available in any browser. You can only have one background per element.

Thanks for your reply T,

In Chrome, which I am using now, it displays all my background images though,

Does anyone know of a good solution to achieve the same thing in other browser?

from: http://www.w3.org/TR/css3-background/

3.1 Layering multiple background images

The background of a box can have multiple layers in CSS3. The properties ‘background-image’, ‘background-origin’, ‘background-clip’, ‘background-repeat’, ‘background-size’, and ‘background-position’ may have multiple comma-separated values. If the values are specified as follows:
background-image: w1, w2, w3,…, wM
background-repeat: x1, x2, x3,…, xR
background-size: y1, y2, y3,…, yS
background-position: s1, s2, s3,…, sP
then the number of layers is N = max(M, R, S, P)
Each of the properties is interpreted as if it had N values, by repeating the specified values like this:
background-image: w1,…wM, w1,…wM, w1,… /* N values */
background-repeat: x1,…xR, x1,…xR, x1,… /* N values */
background-size: y1,…yS, y1,…yS, y1,… /* N values */
background-position: s1,…rP, s1,…rP, s1,… /* N values */

Sorry Chris, I wasn't aware that this was a possibility. This must be one of those new css rules being introduced, making it possible to do a lot more with css than the usual. Usually it's firefox and safari that handle these new rules but this particular rule works as you said in Chrome and also Safari. I also tested it on IE 7 and 8, Opera and FF and it didn't work on any of those. Since this method isn't compatible with all browsers it may not be a good idea to use it.

Here are two other css methods that only work on FF and Safari:

http://www.sitepoint.com/blogs/2008/...ons-and-masks/

http://www.the-art-of-web.com/css/border-radius/

Until recently these two things (gradients and rounded borders) could only be achieved via images but now css is attempting to introduce new rules to achieve them via css alone. Only when all browsers accept them will any of these be viable options...

thanks Towhid,

do you know a good way to make a similar looking design? is having a background div somehow a good option?

thanks for the help!

Chris

btw, im very new to all this but css is amazing,

The only way to have a full sized background like that is to combine all the images together into one and set that as the background of the body.

If you do this be sure to optimize the image to reduce it's file size otherwise a large background image can really slow down page load.

Not all browsers support all features of CSS 3 yet, so it's only going to work right in those browsers that support that feature, the rest, like IE, will not work with that.