I have followed advice from other topics but can't get it to work. I want to set a background image.
my scss file is custom.css.scss and code is body
{ background-image: url("back.png"); }
back.png is located in app/assets/images
custom.css.scss is located in app/stylesheets
i have no problem getting back.png to work through the asset pipeline in my html pages with
<%= image_tag "back.png" %>
#SCSS
body {
background: {
image: asset_url("back.png");
}
}
#SASS
body
background:
image: asset-url("back.png")
I would strongly recommend using SASS over SCSS.
The simple difference is that SASS doesn't have any semicolons or brackets. Other functionality is the same.
--
Although asset_path works, we've found it much more effective to use asset-url (asset_url in SCSS)
use it with the asset pipeline
body { background-image: url(asset-path('back.png', image)); }
more functions at the documentation
Related
i am developing an app in rails with some css and js plugins template,
by default we should separate or js and css file into javascript and css folder right?
but the problem is my plugins folder structure are quite complex,
have a lot of sub folders, so i decided to put all the assets (css, js, images, fonts) into a folder, the problem is everything not working on production mode, the css styles, scripts, images all not loaded, please help.
here is my structure :
javascripts
stylesheets
public_assets
- img
- icon
- bg
- favicon
- images
- proteam
- png
- ualanding
- portofolio
- fullsize
- thumbnail
- font
- css
- js
- sass
- vendor
- ninja-slider
- bootstrap
- font
- css
- js
- font awesome
- css
- fonts
- less
- scss
- jquery
- magnific-popup
- scroolreveal
- vid
images
Static_Dev
FYI i already run
rake assets:precompile
command
i reference my images mostly like these :
<img alt="UrbanAce" src="assets/img/logo.png" height="24">
i believe when i run on production mode, the assets path changed, so i changed my image tag to :
<%= image_tag "logo.png", { src: "logo.png", height: "24"} %>
the above code did not work, even in development mode.
also, what if i need to call some background images from css?
something like :
.hero {
background-image: url("../img/png/UA-Landing/UA-Pattern.png");
background-repeat: repeat-x;
background-position: 0 76px;
height: 280px;
}
i call font like this :
#font-face{font-family:FreightSansPro;src:url(../font/FreightSansPro-Light.otf) format("opentype");
how should i replace it? so it will work on production and development mode.
many thanks....
<%= image_tag "logo.png", { src: "logo.png", height: "24"} %>
you don't need to set src. The first argument is a filename already. Do this instead:
<%= image_tag "logo.png", height: "24" %>
If there is a file at app/assets/images/logo.png, it will display.
To address another file (say, favicon), use path like this:
<%= image_tag "img/favicon.ico" %>
It's a path to the file, minus the top level folder (public_assets in this example).
I just upgraded from Rails 3.0 to Rails 3.1.
I have a foo.css.scss file that references an image (/app/assets/images/foo.png) as follows:
.foo {
background-image: image-url('foo.png');
}
The problem is that my foo.png file is not loaded and I see 404 errors in my logs.
The actual css entry that is generated is:
background-image: url(/images/foo.png);
which is wrong (?) because the image can be found at /assets/foo.png and not at /images/foo.png.
Note that I am still working on development mode.
Another important note. If I rename my foo.css.scss file to foo.css.erb and use:
background-image: url(<%= image_path('foo.png') %>);
it works ok, because it generates /assets/foo.png.
So, the question is why my scss precompiler does not generate the correct css?
Update: my foo.css.scss file resides:
app/assets/stylesheets/sub_dir/foo.css.scss
Does that make any difference?
You may try:
.foo {
background: url("/assets/foo.png")
}
should work fine. Hope it helps :)
try
.classname{
background: url(asset_path('/assets/image.png'))
}
I have tried various solutions. The most elegant one was the following:
.foo {
background-image: url('foo.png')
}
which automatically converted to url('/assets/foo.png') by the SCSS compiler.
.foo {
background-image: asset-url('sub_dir/foo.png', asset);
}
I'm confused about how works assets pipeline, im using a gem called aloha-rails and it have the next CSS rule:
button.aloha-button {
background: url("../img/base.png") no-repeat scroll 0 0 transparent !important;
}
If I run it on local, that rule is on file:
http://local.dev/assets/aloha/css/aloha.css?body=1
And I CAN see the image, it is loaded from this address:
http://local.dev/assets/aloha/img/base.png
But when I run it on heroku, on when I precompile assets on local the css rule is loaded from applications.css, the rule still with ../img/base.png so the image is trying to be loaded from:
http://server.herokuapp.com/img/base.png
and that DOESNT exist, so I receive a 404 error and dont see the image.
Write as following: Remove the dots(..) before the path.
button.aloha-button {
background: url("/img/base.png") no-repeat scroll 0 0 transparent !important;
}
Please do let me know if not working still.
In order to access your image assets in production, where asset precompilation will stick a hash at the end of each filename, you need to use the img-url helper provided by sass-rails if your css has a .scss or .sass extension, or you can use the asset_path helper if you add .erb to the end of your stylesheet filenames:
button.aloha-button {
background: image-url("/img/base.png") no-repeat scroll 0 0 transparent !important;
}
It seems like the aloha-rails gem doesn't do this. Probably also needs to drop the .. in front of the path.
My stylesheet has:
.asc {
font-size: 2em;
background-image: url(/images/up_arrow.gif);
}
.desc {
background-image: url(/images/down_arrow.gif);
}
The font-size works but the background image (arrow) doesn't.
I get ActionController::RoutingError (No route matches [GET] "/images/up_arrow.gif"):
I tried lots of things in routes but nothing worked.
Try this:
.asc { font-size: 2em; background-image: url(/assets/up_arrow.gif); }
.desc { background-image: url(/assets/down_arrow.gif); }
That's how I do it in a 3.1 app I'm working on. Your /images is probably mapped to app/public/images.
Finally found that I needed to do the new precompile of assets step.
'I shoulda read the manual'
Compiled assets are put in public/assets directory by default (the destination is defined in config.assets.prefix).
To create compiled versions of your assets use bundle exec rake assets:precompile
If you don't have write access for the production file system, use this task locally and then copy the compiled asset files.
The asset compilation process:
1. Concatenates & compresses all JavaScript files into one master. Uglifier is the default for the process.
2 Compresses (minifies) all CSS files into one master .css file. CSS is compressed by yui by default.
3. Allows for high level languages like coffeescript to use the assets.
Note: It is possible (though not a great idea) to disable the asset pipeline by changing config/application.rb and set
config.assets.enabled = false
You can skip the asset pipeline when creating a new application with the —skip-sprockets option, e.g. rails new appname --skip-sprockets
You can also set config.assets.compile = true This way the assets are only compiled when a request for them is made.
Dumb question perhaps, but are you positive that /images/up_arrow.gif exists?
When you 404 on an public asset in it just falls through to the rails router. It's not really a routing problem; you just get a routing error because there are no routes defined for static assets.
I had this same issue with Rails 3.2.13.
Solution was to modify the css to this:
.asc { font-size: 2em; background-image: url(up_arrow.gif); }
.desc { background-image: url(down_arrow.gif); }
I'm working with Rails 3.1's asset pipeline and although it seems to work flawlessly in my development environment on my localhost, I'm having huge issues with it on engine yard.
Here's my basic problem.
When I include images for a background in one of my scss files:
a {
color: #3c7f8b;
font-weight: bold;
padding-left: 35px;
font-size: 13px;
display: block;
background: white url(shade.png) top right;
&:hover {
color: #222222;
background: white url(shade2.png) top right; }
&.on {
color: #222222;
background: white url(shade2.png) top right; } } }
I run into the following issues: Even though I have precompiled my assets, the browser requests /assets/shade.png instead of /assets/shade-FINGERPRINT.png which is the actual file that exists.
Does anybody know what I can fix this issues with referencing images in my assets folder inside my .scss files?
You should use image-url rather than url to reference images when using scss in Rails 3.1.
Also, ensure you load compass before sass-rails, as sass-rails over-rides the asset methods to work with the asset pipeline.
Lastly, if you're using capistrano to deploy, add in
load 'deploy/assets'
To enable asset compilation when you deploy.
Check out the answer from 'tybro0103' on this post - Rails 3.1 and Image Assets
basically change the file from scss to scss.erb and then use the asset_path helper method
pre-compile before deploy
disclaimer: i have not tried this myself
qnm Actually I think there is an error with the image_url helper. Not sure if they fixed it but I saw a recommendation to use asset_url with the "image" explicting stated.
i.e. asset_url("some.img","image)