i have a website #local and lots of images in site, but after I deploy site to server images paths are broken(exception given in css file), and I need to fix this as soon as possible.
sample path:
imageurl = #"/Images/sample.gif";
how can i fix this?
thank you.
you can set a appsetting in web.config file with server url like
and get this path on code and add image name with it.
Images (like background-url) in CSS are always referenced relative to the css file.
you need to set in css file like...
background-image: url( '../../Images/image.gif' );
.. this will bring out one folder from current folder hierarchy
Related
I can't find solution to load image linked in css. Chrome inspector shows me message:
404 (not found)
and shows me this link: http://127.0.0.1:5500/components/css/img.png
even if I have in my css
background-image: url(../src/splash_1/img.png)
Could anyone please help me with appropriate linking... I can't find answer how to correctly link that image in that folder structure.
UPDATE:
Below in the second picture attached, I added print screen with real data from Chrome Inspector and code and the element. Maybe that will be more helpful. I want to link correctly
ccbackground.jpg
Thank you!
You just need to pass the path as a string in single quotes with the same path you tried first. The .. is needed to step one folder up from the css folder.
background-image: url('../src/splash_1/img.png');
Note: it can be that the path is cached locally on the client side, you may need to clear browser cache to make it work.
Eventually it turned out I had 2 pairs of the same css files in different location. One pair in correct location and the other in main folder. I was changing css files in editor located in main folder, but in index.html css files were linked to specified folder. So even I changed css it didn't reflect changes in index.html, because the changes were done in the same name css files but in other location. I wonder how it happened I had 2 pairs of css files in different location, this is something really unclear for me. Thank you All for your help and your time.
Try this
background-image: url('/src/splash_1/img.png');
Please try below code...
background-image: url('components/src/splash_1/img.png');
The below is my piece of code, I am not able to add background-image in my web page, can anyone tell me where I am going wrong?
enter image description here
Create folder called 'images' near your class_id.html file are located and Copy "Aravind_Signature.jpg" image to the newly created image folder
and then change the css background-image property as below
background-image:url("images/Aravind_Signature.jpg");
Note : its bad approach for referring image files path starting from drive names like "c:\". Because when you share your code you need change image path always.
There is nothing wrong, you just need to look at referring to path this way...
either use '/' or '\' so that you will get the right path.
Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.
This is my coding, I want to change my background-image, but it seems not working.
I have tried this coding, it is not working, i don't know what's wrong.
<header style="background-image:url('C:/Documents and Settings/Administrator/desktop/images/navigationBackground.jpg')"></header>
Because you are using full path of file instead of URL.
Change url to http://localhost/images/navigationBackground.jpg, or better without server name, just relative url images/navigationBackground.jpg (and move image to web accessable location instead of desktop)
you have to specify the url of the image, instead of the filesystem path
You should restructure your webpage path. You can put all your resources in a single folder and just specify the url of your image, instead of using filesystem path.
I've installed phplist in a folder in public_html folder in my site
http://www.parcuri.ro/news/
It's working, but the images and the css are not "used"
The paths in config file are
$pageroot = '/news';
$adminpages = '/news/admin';
Why is this happening?
When I try to access your css or images, I am getting redirected to your homepage. I am assuming this is your 404 page so the CSS and Images dont "exist". This means your file paths are wrong or you have not saved the css/images in the right area.
Perhaps your images/css are stored in http://www.parcuri.ro/styles rather than http://www.parcuri.ro/news/styles.