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>
Related
I am running ruby 2.3.0 and rail 5.0. When trying to display an background image on a view, I use the following CSS class:
.header_img{
width:100%;
height: 400px;
background: url("../../assets/images/home/home-header.jpg");
}
The image is located in the home subfolder under the image assets folder. I have tried trying to find a solution on here but have not been able to find one that works any help would be awesome.
I am using Rubymine as my IDE and nothing seems to work.
There is no need to provide absolute path as your image is in assests so you can directly do something like this
background-image: url('image.png')
You should have a look at the asset-pipe line, see "2.3.1 CSS and ERB":
http://guides.rubyonrails.org/asset_pipeline.html
The asset pipeline automatically evaluates ERB. This means 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' %>) }
You can use image_url helper without renaming the file to .erb. You just need to add extension .scss. For eg. main.css.scss and add the line like this:
background-image: image_url('/home/image.png')
I have a similar folder structure to you, and I have used a background image successfully.
Have a try of this code instead and see if it works
background-image:url('/assets/home/home-header.jpg');
Also just for extra, if you want a fixed, non repeating background image that covers the whole page add this css underneath ^that line
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
height:100%;
I am using this approach. Its the best way to include the compiled assets.
.class {
background-image: asset-url('image.png');
}
I think THIS is what he/she was looking for:
<div class="main-banner" style="background-image: url(' <%= polymorphic_url(:image) %>');">
(or whatever your active storage item was called.)
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.png');
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"%>);
}
I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:
<link href="<%:#Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
The image I plan to display is in my ~/Content/Images/Designs.png
Here is what I have tried
body
{
background-image: url(~/Content/Images/designs.png);
background-repeat: repeat;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
Other Tries Included:
background-image: url(./Content/Images/designs.png);
background-image: url(Content/Images/designs.png);
background-image: url(Images/designs.png);
none of the above tries worked. What can I do?
The url inside a CSS file is relative to the location of the CSS file.
So if we suppose that you have ~/content/foo.css and you want to include ~/images/foo.png here's how to reference it inside foo.css:
background-image: url(../images/foo.png);
Don't use any ~ inside a CSS file. It has no meaning.
So in your case if the CSS file is ~/Content/Site.css and you want to reference ~/Content/Images/Designs.png the correct syntax is:
background-image: url(images/designs.png);
If this doesn't work for you there might be different causes:
The image doesn't exist at that location
You didn't specify width and height to the containing element so you don't see the image
What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.
This is what I had to do:
background-image: url('#Url.Content("~/images/foo.png")')
If you use bundles and have the directory structure like :
-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png
then you can make a separate bundle for content in subdirectories by defining the bundle in that subdirectory:
bundles.Add(new StyleBundle("~/Content/lightbox/css/bundle")
.Include("~/Content/lightbox/css/lightbox.css"));
background-image: url(../images/close.png);
In my case I had to back out to the root and include a path to the Content directory.
So even if my directory structure looked like:
-Content
--css
---site.css
--img
---someImg.png
I couldn't do
background-image: url(../img/someImg.png)
I had to do:
background-image: url(../../Content/img/someImg.png)
This worked locally in debug mode (no minification) and deployed to AWS (with minification) correctly.
Also, don't forget if you're using Bundle minification and you use #import in your CSS to still include the asset in the bundle. For example:
main.css
#import url(../../Content/css/some.css)
Be sure to include some.css in your bundle:
bundles.Add(new StyleBundle("~/Content/global").Include(
"~/Content/css/some.css",
"~/Content/css/main.css"));
No need to do this if you're using LESS or SASS bundlers as the handler knows how to find the files and include them (that's the point!); however, if you're doing it as a straight CSS import, the bundler won't know to include it when it minifies.
Hope this helps someone!
It could be a caching issue in the browser; that is, the browser may cache an older version if the css file. Clear the cache and try again.
use below code
.background
{
background-image: url("../Images/backimage.jpg");
background-position: inherit;
}
Keep it simple stupid.
At all times, try to stick to relative paths with css url attribute.
/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */
background-image: url("Images/YourImageUrl");
The problem with wrong urls is that css can't locate that image as it doesn't understand the convention used on that url, hence the image is not displayed. So to keep it simple use the reigning relative path approach, and you'll never have problems.
For anyone experiencing a similar problem with a razor page.
You can use your regular CSS form, you just need to play with your folder levels.
This avoids having to do CSS inline.
Using normal HTML/CSS
body{background-image: url("images/sparks.jpg");}
My folder structure for razor
body{background-image: url("../../images/sparks.jpg");}
This Works For Me
<div style="background-image:url('/images/home.jpg')">
AS i have images folder direct in my project so
i used in url
/images/image.jpg
like
<div style="background-image:url('/images/image.jpg')">
I would recommend to just drag and drop the image. Visual Studio will generate the code automatically for you,
body
{
background-image: url('../../Content/Images/dark123.jpg');
}
This URL code is auto-generated by Visual Studio you don't need to write the code manually.
Hope this will fix your issue.
Cheers!
Had the same problem. Solved by adding double quotes in the URL specification:
No:
background-image: url(../images/ic_Chevron_bottom.svg);
Yes:
background-image: url("../images/ic_Chevron_bottom.svg");
The site I work on has a lot of images that contain text. This includes buttons and navigation.
To support localization I include 2 css-files. One that has non language specific properties (font, colour ...) and one that has language specific properties. There is only 1 language specific file served to the user depending on his choosen language.
The language specific file (/content/en/Site.css , /content/de/Site.css ..) has information about background images
div.topHeader p#searchHeader
{
background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center;
}
This works smoothly but I will have a lot of duplicate code. In english the css will be:
div.topHeader p#searchHeader
{
background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center;
}
I will have a couple of languages thats why it would realy pay out to optimize this. Is there a better way to do this?
Just extract out only language specific part from the main CSS to a new CSS for each language and include that CSS in your page dynamically. In this way do don't have to manage lots of CSS classes.
You can try consolidating all external graphics references in separate CSS and referencing it separately in your code.
If you mean form paths in your CSS dynamically, well, you could write a handler to process this particular request for your CSS, read it on the server-side from the file, replacing all language marker parts as required (document.Replace("{lang}", "de")) and then serve the modified CSS back. But it would require some work.
Rather than having different CSS files for each language you could one file, site.css.aspx or similar and process the file, output the paths based on the language supplied POST/GET variables or in the accept headers.
See similar question here
For a start you could use background-image instead of background to save repeating the repeat, positioning, scrolling and colour information.
To really optimise it I would simply dynamically serve the css based on the user's localisation. eg: through a php script or something. You could just do something like background-image: url(/images/<?=$lang ?>/headers/search_lo.gif).
not sure but u can have something like this ,
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; }
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }
where last word after __(dauble underscore) will added dynamically
as
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }
An easy solution would be to apply a class or ID to the body tag in the HTML based on their locale. Then in the stylesheet you could do something like:
div.topHeader p#searchHeader
{
background: no-repeat scroll center center;
}
body.en div.topHeader p#searchHeader
{
background-image: url(/images/en/headers/search_lo.gif);
}
body.de div.topHeader p#searchHeader
{
background-image: url(/images/de/headers/search_lo.gif);
}
There's still going to be a bit of duplication, but you've reduced the amount of CSS you have to write for each localisation.
You can create dynamic CSS with PHP or similar. Here's a PHP example:
index.html:
<link rel="stylesheet" type="text/css" media="screen" href="style.php">
style.php:
<?php
header("Content-type: text/css");
$lang = $_SESSION['however_you_are_detecting_lang'];
?>
body {
background-image:url(images/<?=$lang?>/image.png);
}
that will fetch images/en/image.png or images/de/image.png