How to reference embedded images from CSS?

Question

I have a CSS file that is embedded in my assembly. I need to set a background image for certain elements using this CSS file, and the image needs to be an embedded resource

Answer 1

What about exposing the resources through a Web service? Such as in the CSS file, set background: url( getImage.aspx?image=newyork.jpg )?

Answer 2

Mine is a slight variation on the other suggestions but it works for my inline CSS within my ASP.NET page

1. Add the following entry to the AssemblyInfo.cs file - [assembly: WebResource("MyImageFile.png", "image/png")]
2. add the following code within the CSS to reference the embedded resource - background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(MyUserControl), "MyImageFile.png") %>')

Answer 3

Just follow the following steps to refer a web resource as background Image in CSS

1. Refer Image URL as "background: url('<%=WebResource("xyz.jpg")%>');" in following manner.

   Default.css
   body{
         background: url('<%=WebResource("xyz.jpg")%>');
       }
   

2. In AssemblyInfo.cs file register the CSS file with "PerformSubstitution=true" attribute in following manner

   [assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
   

3. Now again in AssemblyInfo.cs file register the image file as

   [assembly, WebResource("xyz.jpg","image/jpg")]
   

4. Right Click the Image File (xyz.jpg) and CSS File (Default.css) and click on Properties now select "Build Resource" option as "Embedded Resource".

and its done. Happy Coding !!!

Answer 4

<% = WebResource("image1.jpg") %>

You can use above statement inside your CSS file, and while you register your CSS with WebResourceAttribute, you can set "PerformSubstitution" to true

Default.css
body{
    background: <%=WebResource("xyz.jpg")%>
}



[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
[assembly, WebResource("xyz.jpg","image/jpg")]