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 also. Is this possible? Is there any way I can reliably do this?

I ran into the problem when putting an existing stylesheet into this dll then realized images weren't showing up. I don't know of any way to make it work though because I would need to know the URL to the embedded image.

Has anyone done anything like this?

Answer 1

<% = 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")] 

Answer 2

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 !!!