github/rails
1
1
Fork 0
mirror of https://github.com/github/rails.git synced 2026-04-26 03:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Move css data URI into css/erb section

Browse Source
This commit is contained in:
Richard Hulse
2011-09-01 21:20:26 +12:00
parent 1f998c7578
commit cfd785f910
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
railties/guides/source/asset_pipeline.textile
View File

@@ -140,14 +140,6 @@ Images can also be organized into subdirectories if required, and they can be ac
<%= image_tag "icons/rails.png" %>
</erb>
If you want to use a "css data URI":http://en.wikipedia.org/wiki/Data_URI_scheme -- a method of embedding the image data directly into the CSS file -- you can use the +asset_data_uri+ helper.
<plain>
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
</plain>
This inserts a correctly-formatted data URI into the CSS source.
h5. CSS and ERB
If you add an +erb+ extension to a CSS asset, making it something such as +application.css.erb+, then you can use the +asset_path+ helper in your CSS rules:
@@ -158,6 +150,14 @@ If you add an +erb+ extension to a CSS asset, making it something such as +appli
This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as +app/assets/images/image.png+, which would be referenced here. If this image is already available in +public/assets+ as a fingerprinted file, then that path is referenced.
If you want to use a "css data URI":http://en.wikipedia.org/wiki/Data_URI_scheme -- a method of embedding the image data directly into the CSS file -- you can use the +asset_data_uri+ helper.
<plain>
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
</plain>
This inserts a correctly-formatted data URI into the CSS source.
Note that the closing tag cannot be of the style +-%>+.
h5. CSS and SCSS