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');
Related
I'm using the download builder for jquery ui to generate a CSS file. For CSS rules such as:
#ui-datepicker-div .ui-widget-content .ui-icon {
background-image: url("images/ui-icons_444444_256x240.png");
}
The generated css is looking for images/ui-icons_444444_256x240.png, but that doesn't work with the asset pipeline.
I've tried putting the images in public/images and assets/images, but that still doesn't change the fact that rails will always barf on trying to find /images/ui-icons_222222_256x240.png. (error is No route matches [GET] "images/ui-icons_444444_256x240.png")
So where am I supposed to put the images??
If you can change the generated css put your images inside public/images and change
#ui-datepicker-div .ui-widget-content .ui-icon {
background-image: url("images/ui-icons_444444_256x240.png");
}
to
#ui-datepicker-div .ui-widget-content .ui-icon {
background-image: url("/images/ui-icons_444444_256x240.png");
}
Using a relative path will solve your problem.
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
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've just started to work with the rails asset pipeline, I'm a front-end guy.
I'm trying to use image-url helper within sass files so that I don't have to hard-code the path.
The following SASS
.some-class
background: image-url("image.png")
generates the following CSS
.some-class{
background: url("asset/image.png");
}
How do I use the image-url helper to generate the following css, without hard-coding the image path ?
.some-class{
background: url("asset/image.png") no-repeat 0 0 #fff;
}
You can use,
.some-class
background-image: image-url("image.png")
background-repeat: no-repeat;
background-color: #fff;
and so on.
or
background: #fff image-url("image.png") no-repeat 0 0;
should work.
You propably should use:
background-image: asset-url("image.png", image) no-repeat 0 0 #fff;
The asset-url is a sass/rails feature, which lets the asset pipeline do some (production) work for you. You can read about that feature here.
Using the helper is preferable over a plain url("image.png"), as it gives you finger printed URLs in production. See this StackOverflow answer.
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 %>');