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.
Related
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
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
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.
From what I can tell, everything is correct... I have an html file called index.html, and a css file that has the background image reference.
It works if I just load the page on a computer, but no matter what I try to put in the css as the background image for index.html, I can't get it to show anything.
I even tried just putting css in the actual index.html file.
<style type="text/css">
body {
background-image: url('/images/warning_small.png');
background-repeat:repeat;
}
</style>
Is there something I don't know about UIWebviews? Does it not like certain images or something?
There is simple trick to follow, it will definitely work. Follow the simple steps..
Create a folder in your project folder system.
Put all the html and resources files in the folder.
Remove unlinked entries from project.
Then add the folder by check the option shown in the image below
The above step should create a blue folder uncommon than other folder.
The blue folder is the trick, when you will run the app in your app folder you will be able to see an extra folder which you added at step 4. Now since all you resource files are in the folder the html file will look for the resources in the folder itself, and it should work.
You might need to tweak the path in the html, but this should work. It works for me always.
Cheers.
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.