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")
Related
In console screenshots is that, also in /assets/admin included images, and in fine-uploader-gallery.css included like
background: url("edit.gif"); that. How we can fix this images or icons?
I hope, explaining well.
Thanks in advance
change the file .css to .scss and use the syntax of scss:
background: image-url("admin/edit.gif") no-repeat 0 0;
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
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 am trying to dynamically create divs in my Rails app through javascript. However, the divs background images are not linking correctly. I know that Rails will search through images for preloaded css files. For instance, in my main css file I simply have
html, body{
background-image:url('bg.png');
}
However, when I create divs dynamically with the following code.
$("<div>").addClass("icon").css("background-image", "url(" + this.model.get('icons')[i] + ")").appendTo(this.el);
It doesn't find the images. Do I have to use relative urls such as '/assets/images/...'?
Any help is very much appreciated. Thanks!
The stylesheets don't work the same way as template files.
You need to put a full path in them for images try:
background-image:url('/images/bg.png');
It turned out that I had to set the background image to
$("<div>").addClass("icon").css("background-image", "url('/assets/icon_genes.png')").appendTo(this.el);
So apparently, Rails stores all images in just /assets/ as opposed to /assets/images/.
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.