In my view I can load a image with this line of code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div> (this works), but instead I want to load the image from the CSS file.
After reading arround, I have tried this:
#bglion {src: background:url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png', image);}
...but the picture won't load on the page.
How can I make it work?
(The image is in /assets/images)
I think you'll have to do a couple of things. Your CSS should probably be something more along the lines of this:
#bglion { background: image-url('BG-LION6.PNG'); }
background is the CSS property you're actually trying to set. src is not a CSS property. image-url is a Rails path helper that points to your image assets folder. I believe if you just use asset-url it points to your entire assets folder and you would still have to specify that your image is in the images folder.
Secondly, if your div no longer contains an image within it, it will collapse to a width and height of 0 cause there's nothing to define its dimensions. You'll have to add more CSS to the wrapper div to define the dimensions of the image. So something like this:
#bglion { background: image-url('BG-LION6.PNG'); width: 100px; height: 100px; }
Try to do this instead:
#bglion { background: url("/BG-LION6.png"); }
or
#bglion { background: url("/assets/BG-LION6.png"); }
Depending on which version of rails you're using and which folder you set your assets at.
When accessing assets, you should always make the path absolute instead of relative.
You can change your css file to have a css.erb extension and then do something like this
#bglion {
background-image: url(<%=asset_path "BG-LION6.png"%>);
}
Related
Currently I have a Vue.js project with this file tree (showing only relevant folders and files):
root
src
assets
image.jpg
components
header.vue
index.html
So inside the header.vue component, I have this CSS code:
.background-image {
background-image: url();
}
and I need to reference the image.jpg file inside the assets folder. I tried so many different combinations and never saw the image, so I just can't figure it out.
You could try the following:
.background-image {
background-image: url('../assets/image.jpg');
}
If it's not showing, one possible reason is that, the element .background-image doesn't have a height especially if it doesn't have any content yet. Try adding padding or height.
.background-image {
background-image: url("../assets/image.jpg");
padding: 50px;
}
I am trying to set my site's background image to a local img through CSS. But the code will not let me use a local image, but a non-local internet image is fine. Why is that?
Code:
html {
/* background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background-image: url("img/diamondPlate_bg.jpg");
}
The bottom image is the one that should show, but it doesn't. but the top image does work. Why?
You have to provide the full image path, as the browser can't determine where to search for.
According to your CSS file path, I will suppose it is at the img directory with your HTML page, you have to change the url as follows:
body {
background: url("../img/diamondPlate_bg.jpg") repeat 0 0;
}
This is like going back one folder and entering the img folder to fetch images.
I cant change my body background and background color with
For example:
body { background-color:#0c0; }
And
body { background-image:url(../images/bg/stone.png); }
Pleas help !
Possible reasons of not working:
You haven't linked your stylesheet
Your image would not be in the same path.
Your image's extension would be different.
Your hash or hexadecimal color code is wrong.
Your path to image is wrong.
Here is a working fiddle proving that it does work though the background of the body is a funny one as sometimes it calls it if you are calling it off the internet and sometimes it won't so make sure you have the image in a directory called images and the call it like this:
body {background: url('images/yourimage.jpg');}
and to add the color add your color like this:
body {background: red url('images/yourimage.jpg');}
Here is a working fiddle: http://jsfiddle.net/Hive7/xmj7C/
It uses this css:
body {
background: red url('http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg') no-repeat;
background-size: 500px 500px;
}
Make sure your file that your are calling it from is in the same directory as the one with the directory images
I am working on an app using Bootstrap as the framework in Rails (bootstrap-sass). What I want to do is add a sweet background image but I can't seem to override the white background of the body no matter what I try.
Has anyone had success with this? What do I have to change or add to get this to happen?
In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.
The code I added using the id:
html body #bgimage {
background-image: image-url('/images/cityscape.jpg');
}
Edit:
I just checked the errors in the development local server and I have this: ActionController::RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"):
/Edit
Thanks!
There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:
html body #bgimage {
background: url('cityscape.jpg');
}
Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.
If your cityscape.png is in assets/images/ directory, please use the following:
html body #bgimage {
background-image: url(image_path('cityscape.jpg'));
}
And to use your original source, you have to remove /images/ from your image-url as:
html body #bgimage {
background-image: image-url('cityscape.jpg');
}
I already tried many different approaches and none work, am I missing something here?
This is what I have tried...
th a.asc {
background-image: url(up_arrow.gif);
}
th a.desc {
background-image: url(down_arrow.gif);
}
and
th a.asc {
background-image: url("assets/up_arrow.gif");
}
th a.desc {
background-image: url("assets/down_arrow.gif");
}
and
th a.asc {
background-image: url(assets/up_arrow.gif);
}
th a.desc {
background-image: url(assets/down_arrow.gif);
}
and
th a.asc {
background-image: url(<%= asset_path "up_arrow.gif" %>);
}
th a.desc {
background-image: url(<%= asset_path "down_arrow.gif" %>);
}
and...
th a.asc {
background-image: asset-url("up_arrow.gif", image);
}
th a.desc {
background-image: asset-url("down_arrow.gif", image);
}
and many more.
I have renamed the file application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss, index.css.erb
I have read this... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets and 404 when displaying background image in CSS with rails 3.2 and Rails 3.1 serving images from vendor/assets/images and Rails 3.1 and Image Assets and other pages from stackoverflow.
But my images don't appear. They are in the app/assets/images directory. I have double checked and triple checked and yes, they are in that location. I go to Inspect Element in Google Chrome and when I click in the images link, it shows me the broken link image.
Your last example using asset-url should work, assuming a few things...
The asset pipeline is actually enabled (in config/application.rb look for config.assets.enabled = true)
You have sass-rails is in your Gemfile
If sass-rails is part of a group in your Gemfile (say, the :assets group), you have to make sure that group of gems is being loaded by Bundler in your development environment. In your config/application.rb you should see something like this:
if defined?(Bundler)
# This loads your :assets group in the development and test environments
Bundler.require *Rails.groups(:assets => %w(development test))
end
This particular stylesheet is a SASS stylesheet (i.e., should have the extension .SASS or .SCSS because asset-url is a helper from the sass-rails gem)
This stylesheet is actually loaded in the asset pipeline (it should be named application.css.scss or be required/#included by application.css.scss)
If after all of this is true you still have issues, well, then I'd say something silly is going on.
Your first one looks fine and works for me. So a few things to check:
Is you image up_arrow.gif in the same directory as the CSS file? (Or, if your CSS is in the HTML page, then the same directory as the html file)
Use the debug tools in a browser, like Firebug in Firefox or in Safari right-click and select "Inspect Element" (turn on developer menu first in the Safari prefs). Look to make sure the computed CSS properties are what you expect, and then look at the resource / network tabs to see that the browser is trying to load your image from the right location.
Is the image being used as a bg image but just not visible because the A element is too small? If you have no text in your A element it will be 0x0. If it has text and/or size properties it might still be too small if the background image has a bunch of blank space. Try making the A tag larger to see if this is the case. E.g. add a width and height property to your CSS, but also a display: block property seems to be necessary.
If you want an image to be the button, you could also just put an IMG tag inside the A tag. It might be a bit easier, though you can get the CSS to work if you want.
This works for me:
<html>
<head>
<style type='text/css'>
th a.asc {
background-image: url(up_arrow.png);
width: 32px; height: 32px; display: block;
}
</style>
</head>
<body>
<table><tr><th><a class='asc'></a></th></tr></table>
</body>
</html>