I am trying to get my css file using background: url(); to use the correct path to display my images on my index.html, this webpage is a 1 page index.html which just displays static content and some images, nothing fancy, I currently have it on google drive being hosted perfectly fine.
It's just the image paths are not working when they are set to relative which would be "img/example.png" and they don't work with the link you get from setting the images to public so they can be viewed by anyone which for example would be "https://drive.google.com/file/d/IMAGE_CODE/view?usp=sharing"
How have you managed to get your images to load on drive using CSS background: url();?
I don't want a direct sort of link so every time my website refreshes it has to re download the images, that creates very slow refresh page loading, I want it to look for them just like a relative path with much faster loading.
You may have an issue with your path being in the wrong directory, so you would use
../
to move up a directory until the correct one is reached. For example, if your css file is located in a folder structure such as "root/assets/stylesheets/style.css" and your image is at "root/img/image.png" then within your css file, you would have to use the following code
background-image: url('../../img/image.png');
to move up two directories to properly call your image.
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 2 cfm pages in the same folder, doing very similar things. They both produce some reports for user related data. I recently added a loading image to one because some of the queries to generate the reports can take a while.
The second page is a new but very similar page. Since the pages are in the same folder I figured the relative path to the loading image should be the same. However the new page is giving a 404 response for the image request, and when I check the http request header it is adding an extra folder to the relative path and thus unable to find the image.
<img src="../../../Graphics/General/loading.gif">
They are both very similar pages in that they display a simple form, then run some queries and generate a table to display the relevant data to the user. However the relative path above produces "Dev/Menu/Graphics/General/loading.gif" in one page and "Dev/Graphics/General/loading.gif" on the other.
I've since figured out that adding an extra "../" to the image path in the new file has fixed it for the new page, however I am at a loss for why this fix was necessary and why it worked.
<img src="../../../../Graphics/General/loading.gif">
I would expect that since both pages are in the same exact folder, that the relative path to the given image would be exactly the same. I am mostly just curious why that is not the case.
The two reports are in the same folder. Are you loading these pages directly?
yourSite.com/reports/report1.cfm
yourSite.com/reports/report2.cfm
Or are these files loaded via other parent pages?
yourSite.com/some/other/folder/with/include_report1.cfm
yourSite.com/yet/another/folder/that/contains/include_report2.cfm
Often, it's better to load images directly from web root in order to avoid relative pathing issues like these. If the Graphics folder is at the root, then just reference the image in both files like so:
<img src="/Graphics/General/loading.gif">
This way, it doesn't matter what file includes them and renders the final HTML to the browser, the image will be referenced from the web root no matter what.
I used notepad++ with html5 and css3. The problem is that the css isn't loading the images, though in the editor it did. I need help. here's my text for one of the images named content, and yes the content tag is on purpose since it's id:
#content{
width:900px;
height:600px;
background:url(images/content.png);
border-radius:20px;
}
So, the folder is on desktop, it's named images and the image is a png named content. It worked on the editor but it's not showing up on the website. On the website it's just showing the grey background.
I took screenshots of it working in edit viewer and it on the actual website.
http://postimg.org/image/mdeso350h/ -- looks fine on edit viewer
http://postimg.org/image/gb75xlgkh/ -- not working on website
First you need to check the file path of css and the images.,
I think this is your file structure
--folder
----index.html
----name.css
----content.png
so, just try that background:url(content.png); this will help you
incase your file structure like
--folder
----index.html
----name.css
----images/content.png
in this case your style works fine background:url(images/content.png);
Always use quotes for linking images like;
background-image: url("images/content.png");
And inside your root folder in your server (in x10host.com), use file manager to create a folder named images where you have uploaded your file index.html, and then you can see index.html file and images folder in a single place. Then upload your images to images folder. Hope this helps.
Sometimes design tools tend to save file extensions capitalized (.PNG for example), and not every server is aware of that, so you should be.
Check your folder location of the image as well.
After i hosted my HTML5 application on Apache tomcat.My page is not showing any background image.
I have placed my project folder (MyExpert) inside root folder and inside MyExpert folder there is an image folder and a css folder .I am giving background image as
background-image:url(../images/myprofile_on.png)
in my css file but images are not coming on my pages except home page.Though application is working fine on localhost.I tried various thing but no fruitful result.
it looks like it will be a simple referencing or permissions issue here, try nivgating directly to the image in your browser and see if you can navigate to it manually so is this case given your description it would be:
http://www.yourdomain.com/MyExpert/images/myprofile_on.png
If that works then its a simple referencing issue from you css file, if it returns a forbidden access page you know its permissions, if it returns a file not found I would recommend checking the casing on your CSS url to ensure it matches the file path as if your box is linux then file paths are most likely case sensitive.