Question

Working with a bit of in-line CSS within a CMS (fun!). This chunk of code works as it should in Chrome and Firefox, the background image occurs just once. But when the page loads in IE 9, it’s as if the no-repeat value is ignored and the background images repeats through the length of the div.

<div style="width: 500px; margin-top: -10px; background-image: url(http://.../uploadedImages/horizontal-rule-top.gif); background-position: 50% 0%; background-repeat: no-repeat, no-repeat; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(228, 128, 28); padding-top: 30px; padding-bottom: 15px; font-size: 16px; ">
...</div>

Any advice would bemuch appreciated!

Answer 1

I think IE’s having trouble with the presence of the second no-repeat, and, per spec, disregarding the rule it doesn’t understand. The options that IE understands seem to be:

• repeat-x,
• repeat-y, and
• no-repeat.

If you amend your CSS to one of the above it should work.