I have used an image file located on my PC by CSS background-image: URL(img/bg.png); But the browser tries to get the image from css/img/bg.png. How to fix this problem?
Could you try background-image: URL(../img/bg.png) ?
The .. will look for the image one directory up.
Related
How to locate the right url in css to have the backround images
my code here is
background: url('/assets/images/banner/banner1.jpg/') no-repeat;
and this is my local address
H:\xampp\htdocs\web-repo\test\assets\images\banner\banner1.jpg
With a file structure like this:
+--test
+--assets(folder)
+--css(folder)
+--custom(folder)
+--custom.css
+--images(folder)
+--banner(folder)
+--banner1.jpg
index.html
To set the background image from CSS
background: url('../../images/banner/banner1.jpg') no-repeat;
Asuming you index.html is in H:\xampp\htdocs\web-repo\test\index.html
background: url('/assets/images/banner/banner.jpg') no-repeat;
Your file is called banner.jpg and you are referring to banner1.jpg
also you should remove the / from the end.
To be sure your browser is refreshing the cache use Ctrl + F5 to reload.
You can also try the "inspect element" tool in firefox or "inspect" in chrome by doing right click on your index.html. Try editing the css located in your right hand side until you get the right URL for the image. 404 means your URL is not correct.
I have this image in one of my project's folder:
I wantto make a icon with that image, so i tried to call it like this:
But it keeps occuring the error:
I think I have this error because I'm not giving any path.
Can you help me please?
Thanks
The css file is searching in the same folder as it to find the background image.
Try:
background: url("../img/Arrow_Circle_Right-32.png")
The ".." goes back one folder, then the img accesses the image folder.
Use this path in your css:
background: #ff9900 url("../img/Arrow_Circle_Right-32.png") no-repeat 10px center;
Please note the prefix for your base path: ../img/
Like that you go back from the css directory and then you enter in your img directory, that include your image.
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"....
when my css is located in the root of my website, the background loads fine by adding
background: url(images/main-bg.jpg) repeat;
into the body, but when i move the css into a folder named "css" and re-link the HREF it seems to disappear?
Are you using relative links correctly? If you're moving that .css file into a folder, the new relative path should be
background: url(../images/main-bg.jpg) repeat;
...if the images folder is in the root folder as well.
You can use a debugger like Chrome's developer tools or Firebug to double check if the resource is being loaded correctly.
Try to change path to resource background: url(../images/main-bg.jpg) repeat;
You'll need to update the CSS. The url is relative to the relationship of the CSS to the image (not the document). Try background:url(../images/main-bg.jpg) repeat;
That's because your CSS is now searching for the image in (root)/css/images/main-bg.jpg, you need to use a relative path.
background: url(../images/main-bg.jpg) repeat;
.. means go back one directory.
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.