I am trying to load a background image which is stored on Rackspace's CloudFiles in my Stylesheet file. I used Fog & CarrierWave to upload the image file and to call the file. I keep on getting this error:
Invalid CSS after "...und-image: url(": expected ")", was "<%= design.main..."
preview.css.scss.erb:
html{
background-image: url(<%= design.main_image_url.to_s %>);
}
Update: I rephrase my question and I got an answer from here
What I should have ask was "How to pass an instance variable to assets?" - Which you can can't
Put the url in quotes.
url('<%= design.main_image_url.to_s %>');
Related
I have an image at assets/images/folder/image.png.
How do I declare the url in bacground-image in css in order to get to that image?
I tried
url(..images/folder/image.png)
url(/assets/images/image.png)
and other options. Non worked.
You should use this:
background-image: asset-url('folder/image.png')
File extension: steles.css.erb
Path: background: url(<%= asset_path('image.jpg') %>);
Non worked. I managed to do it with:
background-image: url('folder/image.png');
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
So in my:
application.css.scss file I have the following line:
background-image: cloudinary-url('billie-piper-reading-book', $width: '100%');
In development environment it loads with this asset pipeline:
http://localhost:3000/assets/billie-piper-reading-book
Which results in:
GET http://localhost:3000/assets/billie-piper-reading-book 404 (Not Found)
I would assume, that cloudinary-url should genereate something like http://res.cloudinary.com/demo/image/upload/billie-piper-reading-book...
Any reason?
Any support will be appreciated
In order to generate a Cloudinary URL for a static image, you should first run a rake task and follow up the steps as explained in the following blog:
http://cloudinary.com/blog/how_to_deliver_your_static_images_through_a_cdn_in_ruby_on_rails
After the image is synced with your Cloudinary account, the following code example should work:
background-image: cloudinary-url('billie-piper-reading-book.jpg');
This will generate a URL like the following (mind the asset type):
http://res.cloudinary.com/<your_cloud_name>/image/asset/billie-piper-reading-book.jpg
If you want to use an already uploaded image, you can also set the type parameter to upload:
background-image: cloudinary-url('billie-piper-reading-book.jpg', $type: 'upload');
to generate a URL like (mind the upload type):
http://res.cloudinary.com/<your_cloud_name>/image/upload/billie-piper-reading-book.jpg
Also note that $width: '100%' isn't accepted in background-image. You might want to consider using background-size instead.
If you need HTTPS like me, use :
background-image: cloudinary-url('billie-piper-reading-book.jpg', $secure: true);
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.