Carl Reynolds posted on 14 Nov 2011 2:21 PM

rated by 0 users

I have created a content item with a <div> that spans the entire width of the item, and has a background image set with CSS:

<div style="
    width:100%;
    height:700px;
    text-align:center;
    padding-top:100px;
    background-image:url(absolute-path-to-my-image.jpg);
    ">

This works great in IE, but when I view it in Firefox (ver. 7.0.1) the background image is gone. I've tried using a table instead of a div, and doubled up on the background property, but that doesn't help:

<table background="absolute-path-to-my-image.jpg"
    width="100%" height="700" align="center"
    style="
    width:100%;
    height:700px;
    text-align:center;
    padding-top:100px;
    background-image:url(absolute-path-to-my-image.jpg);
    ">
    <tr>
        <td background="absolute-path-to-my-image.jpg"
               width="100%" height="700" align="center"
               style="
               width:100%;
               height:700px;
               text-align:center;
              padding-top:100px;
              background-image:url(absolute-path-to-my-image.jpg);">

This doesn't help either. Something I've noticed is that when I edit the item in FF, it inserts an HTML quote character (&quote;) before and after the image path in the style properties:

style="background-image:url(&quote;absolute-path-to-my-image.jpg&quote;);">

Doesn't do that in IE - not sure if it has any bearing...

Thanks,

joe