My css file location htdoc/anyFolder/css/style.css and image folder file location
htdoc/anyFolder/image/search.png. I used background-image rule in css file like background-image: url("/image/search.png");
but i does not find the image. Browser look for http://localhost/image/search.png while it should look for http://localhost/anyFolder/image/search.png. Where is the problem. I tried
background-image: url("../image/search.png");
background-image: url("/../image/search.png");
background-image: url("./../image/search.png");
none of this work. Cannot find where is the problem. Does it depends on where the css file is included.
If your paths are
htdoc/anyFolder/css/style.css and
htdoc/anyFolder/image/search.png
This should work:
background-image: url("../image/search.png");
This should also work:
background-image: url("/anyFolder/image/search.png");
But you say they didn't. You should check if the names of files and folders are correct and also if you have the base element on HTML, because it could change the path where the browser looks for files.
Does it depends on where is include the css file.
Yes. The path to your images is relative to where your css file is.
Just use:
background-image: url("../anyFolder/image/search.png");
Try putting the html and css file in the same folder
Maybe late, but solution is:
bacgkround-image: url(../search.png)
no need for "anyFolder","image"....
Related
My image is called main-homepage-img.jpg, it is located in the img folder that is in my project folder along with index.html and style.css. I have tried background: url('../img/main-homepage-img.jpg') and plenty more variations, none working. How do I retrieve it? I have no issue doing it in HTML but I'd like to retrieve it via CSS.
If your file directory tree is structured how it sounds, it sounds you can just use background-image: URL('./img/main-homepage-img.jpg'); and it should be able to find the image.
I have a hard time adding picture through background-image property in css
my file structure looks like this:
www
styles
stylesheet.css
images
background.jpg
I tried:
background-image: url("/images/background.jpg");
background-image: url("images/background.jpg");
background-image: url("background.jpg");
background-image: url("../images/background.jpg");
background-image: url("/../images/background.jpg");
background-image: url("../../images/background.jpg");
I also tried all of these options without quotes. I copy-pasted image's name and my folders are as I stated: main folder in which I have styles folder(inside is stylesheet.css) and images folder (inside is background.jpg). The image did not load in chrome or firefox. What path declaration should I use to make the image show?
www
index.html
styles
stylesheet.css
images
background.jpg
that the directory, here inside index.html / index.php (where u want show)
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
remember for href link
and then at stylesheet.css
background-image: url("../images/background.jpg");
background-image: url("../images/background.jpg");
This is correct. If it is not working, perhaps the path name is not the problem.
Are you running this from a server?
Or, are you running this from your computer?
Try changing the situation and see if anything changes.
I'd put my money on spelling mistake, though. Best to triple check it.
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 a folder called "Images" inside my IDE and I want to access this file for my CSS property background-repeat:repeat;
How do I "call" it?
images/background.png isn't working! :(
EDIT: Here's the solution showing the hierarchy. Any help? :)
EDIT3:
I've got this now on my CSS:
body
{
background-color: #FFFFFF;
background-image: ../../Images/BackgroundPatternAlt.png;
background-repeat:repeat;
}
According to my solution explorer picture, it should work but it isn't. Any help?
ps. To clarify my CSS can modify my page properly because if I change the background-color, everything changes properly. The error must be inside the background-image address. T_T
The background images you define inside CSS is always relative to the path of the CSS (if you do not explicitly say not to).
So, if you want to use:
background: url(images/background.png) repeat;
...the CSS-file must be located in the "parent"/root of the images-folder, so I suggest you move the Images folder into App_Themes/Default.
Depends where the css file is in relation to the image. Is the .css file in a folder off the root? If so try "../images/background.png"
Depending on your web-server, pathnames can be case sensitive, so it would be:
Images/background.png
Edit: If your Images folder is in the document root of the web-server, you can always use:
/Images/background.png
As I see the picture, you must try yet another level up, at this path: ../../../Images/
Try '../../images/background.png' if the folder structure remains the same as in your Solution Explorer.
I can't figure out why the image is not resolving inside the div id="header_container"
everything looks ok, the image is on the server,,, what's the issue here?
http://winteradagency.com/mrw/index.php
any ideas?
thanks
When you make a CSS url() directive a relative path, it is relative to the CSS file, not the page the CSS is on. In your case, the header_container directive is:
background-image: url(images/logo.jpg);
Because your CSS file is in /mrw/styles/styles.css, the path that the image is being looked for at is /mrw/styles/images/logo.jpg. You need to adjust your CSS directive accordingly. One of the following should work:
background-image: url(/mrw/images/logo.jpg);
or
background-image: url(../images/logo.jpg);
Background image URL's in a CSS file are relative to the URL of the CSS file itself, not to the URL of the parent HTML page which included the CSS file.
So, to fix your particular problem, change images/logo.jpg to ../images/logo.jpg, otherwise it is trying to lookup the image in styles/images/logo.jpg