Need help? Check out our Support site, then


Multiple Backgrounds Stripped

  1. I've noticed when trying to use multiple backgrounds with a fallback for older browsers, the multiple background url(s) are being stripped.

    Take the following, for instance:

    <br /> .test{<br /> /* Fallback for older browsers */<br /> background: black url(myfile.png) no-repeat left top fixed;</p> <p> /* Newer, CSS3 browsers */<br /> background:<br /> url(fancybackground.png) repeat-x,<br /> url(myfile.png) no-repeat left top fixed,<br /> black;<br /> }<br />

    Once processed by wordpress.com, it ends up as:
    <br /> .test {<br /> background:black url('myfile.png') no-repeat left top fixed;<br /> background:repeat-x, no-repeat left top fixed, black;<br /> }<br />

    The outputted code results in the desired fallback behaviour for older browsers, but a plain black background with no image at all in modern browsers. It's a bit annoying.

    There is a workaround, and that is to specify the fallback as longhand:
    <br /> .test{<br /> /* Fallback for older browsers */<br /> background-color:black;<br /> background-image: url(myfile.png);<br /> background-repeat: no-repeat;<br /> background-position: left top;<br /> background-attachment: fixed;</p> <p> /* Newer, CSS3 browsers */<br /> background:<br /> url(fancybackground.png) repeat-x,<br /> url(myfile.png) no-repeat left top fixed,<br /> black;<br /> }<br />

    It would still be nice if this could be resolved in the next version of the CSS parsing whatsit. :)

  2. Good day to you,
    I’m sorry to report that you have accidentally posted to the wrong support forum. We cannot help you here at WordPress.com with that site as it’s not being hosted by WordPress.com and we run on different software. This is the correct forum for your software http://wordpress.ORG/support/
    WordPress.com vs WordPress.org: The Differences
    http://support.wordpress.com/com-vs-org/
    Best wishes with your site.

  3. Thanks for your prompy reply. I believe this is in the correct spot as I am actually referring to the "Custom Design" upgrade on the wordpress.com hosted service.

    The site I am currently working on is set to private, so I have not provided a link. Sorry for any confusion. :)

  4. All CSS editing is theme specific and the upgrade does come with Staff support. Staff are able to enter private blogs and see what's going on but the rest of us cannot. I have flagged this thread so it will be moved to the CSS Forum.

  5. Thanks for reporting this. There's a bug in the CSS parser. I have reported the bug.

    In the mean time, you can work around the issue by removing all the spaces between the list of elements and it should work.

    background:url(fancybackground.png) repeat-x,url(myfile.png) no-repeat left top fixed,black;
    }

    Could you try that out and let me know if you have any trouble with it?

    Note that you should make sure to use full URLs starting with http:// inside the url() function in the CSS editor at WordPress.com.

  6. Ah, that makes sense. Thanks for the info. :)

  7. I spoke too soon. It appears the url() function is getting removed when it shouldn't if you use multiple background settings in one property. I've added that to the bug report. Sorry I missed it before.

    UPDATE: This issue has been fixed.

Topic Closed

This topic has been closed to new replies.

About this Topic