How to Reference Embedded Images from CSS

How to reference embedded images from CSS?

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

How to reference an embedded image from CSS?

CSS pages are not rendered like aspx pages, so you can't put server blocks in them.

Instead, you can include that CSS in your ASPX page in a <style> block and then you can use this mechanism.

CSS Embedded Image as a link

You should make the element block level (at least inline-block) to set the width/height and explicitly set the cursor. These two things are the key components.

.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block; /* set display so you can set width/height */
cursor: pointer; /* ensure it shows the link cursor */
width: 16px;
height: 16px;
}

And the HTML:

<a href="#urlhere"><span class="user"></span></a>

So, you end up with an inline-block element which shows the image, and then you wrap that with an anchor. This is basically the same as wrapping an anchor around an <img />.

Alternatively, you could do this with just the <a>. You would use the exact same CSS, with this HTML:

<a href="#urlhere" class="user"></a>

Both should achieve what you're after. The difference between these two choices is mostly semantics.

Server Control - Embedding Images - Referencing in css

This is answered here: https://stackoverflow.com/a/1196850/1402923

Quoted here:

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

Is it possible to reference an image in HTML file folder from CSS?

This is not possible in an external style sheet. Image urls are relative to the style sheet url, not the document url.

You can solve this by adding the CSS to the document itself. You don't need the entire CSS in the document, but you could just add the background image in the document:

<style>.yourclass{ background-image: url('background.png'); }</style>

It's not great, but I think it's the best solution at this moment.

Alternatively, you can specify the backgrounds for all documents in the css and add a class to the document. For instance, you can add the document title as a class to the body, and base your style on that, so you would get something like

body.chapter-1 .yourclass{ background-image: url('../chapter1/background.png'); }

The disadvantage, of course, is that you would have to know the documents and add each one to the style sheet. So it depends on your situation which one works best. If you want your chapters to choose from a select number of styles, adding a class would be the best option. If each document should have its own background, I think embedding it in the document itself would be the best option, otherwise your stylesheet will contain your complete website index and has to be changed every time you add new content.

MVC Bundling and Minification: converts embedded images to to URL paths

Scrap that question. This is a known bug. Currently work around is to separate your css into embedded images and images via url.

Vote for these work-items: https://aspnetoptimization.codeplex.com/workitem/88 and https://aspnetoptimization.codeplex.com/workitem/108

Rails: How to reference images in CSS within Rails 4

Sprockets together with Sass has some nifty helpers you can use to get the job done. Sprockets will only process these helpers if your stylesheet file extensions are either .css.scss or .css.sass.


Image specific helper:

background-image: image-url("logo.png")

Agnostic helper:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

Or if you want to embed the image data in the css file:

background-image: asset-data-url("logo.png")


Related Topics



Leave a reply



Submit