I have a website, I moved the site to a new pc, loaded it up into dreamweaver, however the links for images in the css are still pointing to the old location, I have tried to change them but them will always revert back tot he old location. I tried uploading the site then downloading the style.css to see if that could kick it, but i will not.
When I open up the style.css I can see the old location, (yes I have always used the properties to add the location of header images.
As a last resort I manually changed the style.css, however I will not work for me.
Any ideas?
It looks like your paths are absolute instead of relative. Absolute path won't work if you relocate your image or HTML files into different folders or change your folder structure. The browser won't be able to find the image file.
Related
So I am remaking a site for my company moving from our wordpress site that has been failing. I am running into issue of using any image with a relative path. I can use the absolute path to the image on the wordpress site but that's not going to last so I need to be able to use relative. I am using asp.net to create the site.
My file path is like this:
Root
|-Images
|---Image in question
|-Views
|---Home
|------Index.cshtml (This is where I want the image showing up)
In my Index file I am trying to use an image as a background so I have the following:
<style>
body{
background-image: url("/../Images/Church-Main-Homepage-Image-3.jpg");
}
</style>
So far I've tried:
/Images/Church-Main-Homepage-Image-3.jpg
../Images/Church-Main-Homepage-Image-3.jpg
../../Images/Church-Main-Homepage-Image-3.jpg
/../../Images/Church-Main-Homepage-Image-3.jpg
/../../../Images/Church-Main-Homepage-Image-3.jpg
<Application>/Images/Church-Main-Homepage-Image-3.jpg
I know I'm going a little too far with the "../" but I've been just trying different things to try and get this working. When using an absolute path for the background it works fine with no error.
Is there some special way I need to do this in asp.net that it just doesn't like these relative paths?
Update
screenshot of files
Issue turned out that I needed to have my images folder in the wwwroot folder. Thank you #thanzeel
I have come into an issue where my webpage will not load a background image in any browser if I open it directly into the browser, but if I open it up via a live server addon for VS code it works entirely fine and loads everything correctly. I have videos attatched to the webpage which load entirely fine in both scenarios, and have come to a bit of a deadend...
file's to see if file pathing is incorrect
Where the image should be loaded
The html file calling the class
This is a guess at the moment but it might be, on the second image that you posted, that you have detailed ../../ twice. This is telling the path to back up by two folders then look for the assets folder.
Looking at your file layout. You have an index page then an assets folder which contains a videos folder which contains the image.
You shouldn't need to back up out of the folders using any itteration of ../ from where you index page is located. The correct path might simply be assets/videos/cover_image.jpg
I have an image which should be displayed on all the pages....it is working perfectly fine for all the pages except for a single page. On Inspect it shows could not load the image.
<div class="wrapper">
<img src="images/uk.png">
</div>
From the look of your code, my guess is that it appears to be a relative path problem. The page in which you cannot load the image successfully is probably in a different folder to the pages where you can load the image successfully.
<img src="images/uk.png"> is a relative link. According to that link usage, the file uk.png needs to be in the folder images, and the folder images needs to be in the same folder as the file you are trying to include the image on.
If your images folder is not a sibling of the file you are trying to include the image on, you have three options:
use ../ to navigate to the correct folder (<img src="../images/uk.png">)
use the root-relative / prefix (<img src="/images/uk.png">)
use an absolute URL (<img src="http://www.example.com/images/uk.png">)
For more information about relative paths, check out CSS Trick's article, Adobe's article, or IfYouCodeItTheyWill's article.
If you have ensured that your index file is indeed in the correct location, and your path is indeed correct, you may have a caching problem. Try holding SHIFT while clicking the refresh icon, and see if that works. If not, you can bring up your console with F12 to further debug the problem.
Hope this helps! :)
I'm brand new to html and CSS. I decided to use an icon as my favicon, so I used a generator to change my .png to a .ico. I downloaded it, used it, was great. Now I want to change it, but I'm running into an issue.
What I want as my favicon.ico
Very hard to see, but it is a circle with a logo in it.
When I move it to my website folder, it changes to THIS:
The logo it changes too
It changes when I move it. Granted these are .png, but I use the .ico of both those pictures. Tried using a different .ico converter, didn't work. Tried perm deleting the first .ico, didn't work. If anyone has any ideas, thanks.
The most likely is that it is not changing due browser caching.
Clear your browser cache or when you specify the url add a parameter you can change when you want a new version downloaded.
href=”favicon.ico?v=1”
Well I built a page which is working absolutely fine as you can see below:
but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this
the problem is that the attached Style Sheets are not working and the Java Script is not working.
see below
where you see the green dots here the images are loaded fine...
where you see the pink dots the images are not loaded
where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...
WHATS HAPPENING
Perhaps your assets (css and js) are served incorrectly?
If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.
It looks like the images are in the wrong place.
WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:
"Look for the file example.png in the folder C:\www\images\"
You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.
This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:
url('images/example.png');
Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)
Hope that helps.
i had my links like
href=".\images\image.png"
just changed them to
href=".\images/image.png"
the server was doing what it was supposed to do...