Context:
http://getcassette.net/documentation/stylesheets
Specifically:
Image URLs in the CSS are rewritten. For example, a file
~/styles/main.css, with the content:
body { background-image: url(img/bg.jpg); }
is transformed into:
body { background-image: url(/_assets/images/styles/img/bg_25cb72e61bd5ag2_jpg);
Now in my particular case for example, in my .less file, I might have a rule like this:
.ribbon {
background: url("/Public/image/blue-rib.png") no-repeat;
}
And Cassette is supposed to rewrite it and the browser actually receives this rule:
.ribbon {
background: url("/_cassette/file/Public/images/blue-rib_81ab1e7f2fdb27c91a9e9b41eed420390e21f7e0.png") no-repeat;
}
And the image displays fine.
In this particular case, using the same idea, the background rule is not rewritten by cassette and the users receives the regular rule I manually entered in the .less file.
Here are the facts:
The working and non-working rules are both in the same .less file.
The image is correctly in my Visual Studio project, in a folder /Public/images.
Using the Google Chrome web tool, I can see the rule is background: url("/Public/image/blue-rib.png") no-repeat; - Not rewritten as it should be by Cassette.
Any ideas on what might the cause of this?
I tried changing to debug=false in web.config, running the app and nothing works.
Tried switching back to debug=true and still no dice.
Any suggestions?
Do the images exist on disk? Cassette skips images it can't find.
Also, does switching to CSS relative URLs work?
Related
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
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 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");
I have created a basic MVC3 site and have added image paths into the site.css file (part of the original template).
When I run the application through dev studio the site looks OK and the images are displayed.
When I build my installer and deploy the site onto my server the images aren't displayed.
Here is a sample of my css file:
#CustomerLogo
{
position: relative;
margin-left:auto;
margin-right: auto;
width: 300px;
height: 96px;
background-image: url(/Content/themes/base/images/CustomerLogo.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: rgb(41,139,178);
}
Besides ensuring that the images are actually loaded on the server, you may want to check whether the application on the server is actually running at the root directory /. For example, if your site is located at facebook.com/myGreatApp by prefixing your url with / you are telling the browser to look for images at facebook.com/Content/... which is the root rather than at facebook.com/myGreatApp/Content/...
As some other posters have mentioned, the fix for this would be to determine what the actual path from your css to those images is and to use that. A relative path would serve this perfectly and which relative option to use depends on where the css is located in relationship to the images.
Seems like issue with deploying your site to virtual directory. Anyways, you should include images relative to css file, not to application. Try
background-image: url(themes/base/images/CustomerLogo.jpg);
Have you tried a relative path? Assuming your css file resides in ~/Content/themes/base, this should work:
background-image: url(images/CustomerLogo.jpg);
You may need a .. to assist in finding the Content folder,
Example:
background-image: url(../Content/themes/base/images/CustomerLogo.jpg);
Are you sure that the URL is working? If you try to access the URL directly through the address bar, do you see the image?
I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL".
I'm sure that there is no permission problem in that folder.
My CSS class is
body {
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC;
color: black;
font: 13px/1.2em arial,helvetica,clean,sans-serif;
height: 100%;
position: relative;
}
What could be causing the issue?
You are using a local path. Is that really what you want? If it is, you need to use the file:/// prefix:
file:///H:/media/css/static/img/sprites/buttons-v3-10.png
obviously, this will work only on your local computer.
Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from remote (http://, https://) pages has been widely disabled due to security reasons.
I know this is really old, but I'm posting my solution anyways since google finds this thread.
background-image: url('./imagefolder/image.jpg');
That is what I do. Two dots means drill back one directory closer to root ".." while one "." should mean start where you are at as if it were root. I was having similar issues but adding that fixed it for me. You can even leave the "." in it when uploading to your host because it should work fine so long as your directory setup is exactly the same.
Source location should be the URL (relative to the css file or full web location), not a file system full path, for example:
background: url("http://localhost/media/css/static/img/sprites/buttons-v3-10.png");
background: url("static/img/sprites/buttons-v3-10.png");
Alternatively, you can try to use file:/// protocol prefix.
source URL for image can be a URL on a website like http://www.google.co.il/images/srpr/nav_logo73.png or https://https.openbsd.org/images/tshirt-26_front.gif or if you want to use a local file try this: url("file:///MacintoshHDOriginal/Users/lowri/Desktop/acgnx/image s/images/acgn-site-background-X_07.jpg")