Sprites inside css with aspnet image framework

Hi im using the sprite framework http://aspnet.codeplex.com/releases/view/50140

I have it working so that i can do things like:

@Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")

but how can i us开发者_C百科e the images within css files? eg

#wrapper {
    width: 980px;
    margin: 0 auto;
    background: url(/App_Sprites/images/img01.gif) repeat-y left top;
}

---

If the image you are referencing in the CSS file exists, then it should work. The CSS path is relative to the CSS file. O you have the path correct? You can check with firebug.

---

This will require you to create CSS file on the fly, at runtime and fix up the paths in your classes and IDs.

---

The whole idea of the image framework is that it generates the CSS files dynamically. So let's suppose that you have placed your images inside the ~/App_Sprites folder: img1.png, img2.png, img3.png. Now you simply register the HTTP module in your web.config:

<httpModules>
  <add type="Microsoft.Samples.Web.ImageOptimizationModule"
       name="Microsoft.Samples.Web.ImageOptimizationModule" />
</httpModules>

and then inside the head section of your page you include the dynamically generated CSS:

@ImageSprite.ImportStylesheet("~/App_Sprites/")

which will render the following:

<link href="App_Sprites/highCompat.css" media="all" rel="stylesheet" type="text/css" />

Now all that is left is to use the rules contained inside this CSS:

<div class="img1-png"></div>

Or if you wanted to directly include the image inside your markup:

@ImageSprite.Image("~/App_Sprites/img1.png")

So the idea is that you use directly the dynamic CSS generated by the framework, you cannot use those rules in your CSS files.

Also make sure you read the documentation for the different modes and the settings.xml file which allows you to customize those modes.