This should be a simple thing but for some reason it won't work.
I'm having trouble getting a background image displayed on my page. I'm using Rails 3.2 with the asset pipeline. I am trying to display it on pages related to my home controller.
The image location is: app/assets/images/dna.jpg
home.css.scss
background: url('/assets/images/dna.jpg');
I've also tried the following:
background: url('dna.jpg');
background: url('/assets/dna.jpg');
background-image: image-url("dna.jpg");
background-image:url(image_path('dna.jpg'));
Regardless of which approach I try, I get the same error:
Sass::SyntaxError at /
Invalid CSS after "background:": expected pseudoclass or pseudoelement, was " url('/assets/i..."
(in /Users/sean/Dropbox/bin/rails/assay/app/assets/stylesheets/home.css.scss)
See also this SO post: Adding a background image in Ruby on Rails 2 in CSS
EDIT
Referring to this post: sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`
I cleared the asset cache
rake tmp:cache:clear
And bundle updated my sass-rails gem. It's at 3.2.6 now.
None of that made any difference.
I suspect a very simple reason for your troubles: indentation. Most of the times in scss it happens that there is no space after the statement, in your case background:. Try also this in your scss prefixed file:
background: url(dna.jpg);
It always works for me.
I found a work-around: turned the scss file into a normal css file.
home.css
body {background-image:url('dna.jpg');
background-size:cover;}
Now it works fine. It doesn't seem like the right solution though.
I had the exact same issue and it was a result of me using Sass Indented Syntax in an SCSS file.
More info on the differences between Sass and SCSS: http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html
Related
I'm using CKEditor via the 'rich' gem for Ruby on Rails.
It has historically worked fine, but at some point my editor icons started looking like this:
I'm not sure what caused was, whether I upgraded something or what.
(I do know that it's not a browser-cache issue.)
How I can fix these icons?
The code:
This is the HTML for the Bold button's span element (whitespace added for readability):
<span class="cke_button_icon cke_button__bold_icon"
style="background-image:url(http://localhost:5000/assets/ckeditor/plugins/icons.png?t=E4KA);
background-position:0 -24px;
background-size:auto;">
</span>
And the styles as interpreted by Chromium:
In that last line, url(icons.png) actually resolves to http://localhost:5000/assets/ckeditor/skins/moono/icons.png
What I can see but don't know how to resolve:
There are two different icons.png files at play here:
<gem_path>/vendor/assets/images/ckeditor/plugins/icons.png
(works correctly with background-position offset -24px)
<gem_path>/vendor/assets/images/ckeditor/skins/moono/icons.png
(is calibrated for a different offset value)
In the code snippets, you can see that the CSS specifies offset -24px, thus the first image is the correct one. The inline-element style specifies the first image, but is overridden by an !important-ified url(icons.png) which loads the second image (which is wrong).
Why the heck is it doing that?
Can I somehow fix this without forking the gem? (I can fork the gem, but I'd rather not maintain a separate fork if possible.)
Add below CSS in the application.html.erb file
.cke_ltr .cke_button_icon {
background-image: url('/assets/ckeditor/plugins/icons.png?t=H5SC') !important;
}
I being trying to attach a to attach an image to a background, and it wont display.
my current code path is assets > stylesheets > application.css and assets > stylesheets > style.css.scss
Whats the correct url path my current code is as follow:
background: #F4F4F4 url("/assets/images/background.jpg");
I been looking around but none of the solution has been working your help will be very much appreciated.
Try this one please
background: #F4F4F4 url("background.jpg")
I am attempting to have a image render in the background of a div with the class head.
My application view is written Haml and the body is defined as follows:
%body
.container
.head
.sixteen_columns
.top-nav
Included in my application stylesheet is:
.head {
background-image: url(/images/background_image.jpg);
width: 100%;
height: auto;
}
I have tried a number of variations to specify the path of the image and altered the image name several times but to no avail.
What is the issue?
Consider using the asset_path helper when referencing images in your stylesheet. Documentation may be found here (check out 2.2.1)In the context the CSS you listed you would heave
.head {
background-image:url(<%= asset_path 'background_image.jpg'%>);
width:100%;
height:auto;
}
Note: This requires that your style sheet be an erb.
Doing so offers a number of advantages over explicitly stating the path, one being that as the structure of rails application changes with new version releases, you will not need to change anything in your code in order for that image to be referenced properly.
This may seem like overkill just to reference an image but it's one of the many conventions of Rails that are difficult to get used but great! as your application grows and changes, hopefully enabling it to better endure the test of time.
Assuming you're using Rails 3.1 or beyond, and that you're using the asset pipeline properly for your images, you can include your image file by doing the following:
.head {
background-image: url(/assets/background_image.jpg);
width: 100%;
height: auto;
}
The reason for this is because of the way the asset pipeline works. It compiles your assets at run time and it places all of your assets in a folder called /assets/. It also ignores subfolder structuring and it just dumps everything into the root /assets/ folder, not /assets/subfolder/.
Try running
rails -v
from the console to confirm what version of Rails you're on.
It sounds like you're running a rails 2.x application, correct? That should mean that you're serving images, js etc from the /public directory. One important gotcha that tripped me up setting background images in css is that the paths you specify are relative to the directory the stylesheet is in(e.g /public/stylesheets), not the root directory of the project itself.
Have you tried changing the path to go up one directory from where the stylesheet is located?
.head {
background-image: url(../images/background_image.jpg);
width: 100%;
height: auto;
}
EDIT: What other paths to the bg image have you tried?
Some other possibilities could be:
background-image: url(images/background_image.jpg);
background-image: url('../images/background_image.jpg');
One other thing to check would be to load the view and examine the div in Google Chrome using the inspector (Ctrl Shift + I). Select the div and examine the styles Chrome is assigning to it.
Also, double check that it's still named background_image.jpg Can't tell you how many times I've gotten burned by some typo I overlooked ;)
Solution:
It turned out to be a combination of two things. I used this format for the background image:
background-image: url(../images/background_image.jpg);
However, the .head div was renbdering with a height of 0. I added a fixed height to test, and it all showed up perfectly. I can work with this from here.
Thank you all so much for the help!!
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your css files.
I have a Rails app with the following in /app/assets/stylesheets/styles.css.erb:
...
#nestedbg {
background-position: left top;
background-image: url(<%= asset_path 'siteheader2.png' %>);
background-repeat: repeat-x;
background-attachment: fixed;
}
...
When I run rake assets:precompile and then run rails s -e production, everything works as expected. However, when I remove the precompiled assets and run rails s in development, the CSS file comes up as shown above instead of being properly substituted.
I tried putting config.assets.compile = true in /config/environments/development.rb and that did not help.
Any ideas?
Thanks.
I honestly cannot say why this is not interpreted correctly in your case, but I have a much better workaround to offer: skip erb interpreting altogether.
You can do this like so:
/* styles.css.scss */
background-image:url(image_path("siteheader2.png"));
If you did not have a chance to I would also suggest to have a look at SASS: it is integrated in the Rails asset pipeline and lets you do cool things like variable declarations, nesting, mixins, ...
I found that my css files wouldn't be processed by ERB unless SCSS processing was also added.
I changed my screen.css.erb to screen.css.scss.erb and now <%= asset_path 'file.png' %> is rendered correctly as /assets/file.png.
I'm on Rails 3.1.3.
I was using Rails 3.1.1 and when I switched the app to use Rails 3.1.3, the problem went away. I switched back to 3.1.1 to see if the issue came back and it did not.
I'm guessing that it was a problem with one of the gems and the update to 3.1.3 brought other gem updates with it.
Bizarrely, I found that changing asset_path to asset_data_uri and then back to asset_path worked for me. Was using Rails 3.1.3 all along.
Strange.
Sam Oliver's advice did the trick for me, simply renaming the extensions didn't update the timestamp on the files.
CSS and ERB
The asset pipeline automatically evaluates ERB. This means that if you add an erb extension to a CSS asset (for example, application.css.erb), then helpers like asset_path are available in your CSS rules:
.class { background-image: url(<%= asset_path 'image.png' %>) }
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 data URI — a method of embedding the image data directly into the CSS file — you can use the asset_data_uri helper.
CSS and Sass:
When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png".
The more generic form can also be used but the asset path and class must both be specified:
asset-url("rails.png", image) becomes url(/assets/rails.png)
asset-path("rails.png", image) becomes "/assets/rails.png"
Referenced By: Rails Guide Asset Pipe Line
Heading: 2.2.1 and 2.2.2 respectively.
I have a Rails 3.1 app with an image:
app/assets/images/icons/button.png
It seems like the image should be served at this URL:
assets/icons/button.png
but if I go to this URL I get a 404. To fix this I created an initializer and added my images/icons subdirectory to the asset path:
Rails.application.assets.append_path "app/assets/images/icons"
However, this does not seem like it can possibly be the recommended way to accomplish this. I'm aware of the require and require_tree directives for JavaScript and CSS assets, is there an equivalent for image assets? How are other people doing this?
EDIT: As of Rails 3.2.rc1 this is now fixed! asset_path now generates proper paths when deploying to sub-uri!
For images it just works. Rails packages everything in images/ tree. I personally use them like this (actual code):
CSS:
a#icon-followers{
background: url(<%= asset_data_uri "icons/followers.png" %>) center center no-repeat;
}
(asset_data_uri actually makes the images inline in the CSS file using base64, but that's irrelevant in this case)
No custom configuration required. After precompiling, images from app/assets/icons/ end up in public/assets/icons/.
You can open public/assets/manifest.yml to see how Rails translates the paths to actual files.