ASP.Net incorrect background image style rendered

Question

Using ASP.Net, I have a server control for which i would like to add the inline css style "background-image:none". However, when i call:

writer.AddStyleAttribute("background-image", "none");

The following inline style is generated (and tries to resolve the url "none"):

background-image:url(none)

Is there a special syntax I can use to set the background image to none inline?

Answer 1

Looking at the code for the HTMLTextWriter and CssTextWriter classes in .NET Reflector, the only thing I can think of is subclassing HTMLTextWriter yourself.

"Binary not the first element in the style enum", ~HtmlTextWriterStyle.BackgroundColor, is what it uses for any style whose name it doesn't recognize, and therefore doesn't bother to check if the value needs wrapped in "url()" when it's actually written out.

HtmlTextWriterEx isn't the greatest name, but whatever. Depending on what you're doing, you might(?) need to do something like this in your code-behind System.Web.UI.Page subclass:

protected override HtmlTextWriter CreateHtmlTextWriter(TextWriter writer)
{
    return new HtmlTextWriterEx(writer);
}

And here's the class:

class HtmlTextWriterEx : HtmlTextWriter
{
    public HtmlTextWriterEx(TextWriter writer) 
        : this(writer, "\t")
    {
    }

    public HtmlTextWriterEx(TextWriter writer, string tabString)
        : base(writer, tabString)
    {

    }

    public override void AddStyleAttribute(string name, string value)
    {
        if (name.ToLower() == "background-image" && value.ToLower() == "none")
            base.AddStyleAttribute(name, value, ~HtmlTextWriterStyle.BackgroundColor);
        else
            base.AddStyleAttribute(name, value);
    }

    public override void AddStyleAttribute(HtmlTextWriterStyle key, string value)
    {
        if(key == HtmlTextWriterStyle.BackgroundImage && value.ToLower() == "none")
            base.AddStyleAttribute("background-image", value, ~HtmlTextWriterStyle.BackgroundColor);
        else
            base.AddStyleAttribute(key, value);
    }
}

Answer 2

You could try adding a CSS class to your page such as

.noimage { background-image: none; }

Then instead of adding the style attribute in your code behind you could add the CssClass.