HTML images wont show when added to website but works fine when previewed?

Question

So I added my images to my HTML code, I saved it then previewed it in Google Chrome and it worked fine but when I add it to my website I get the outline of a white box where the images should be and I dont know why.

Mens

Im making a drop down menu and I want a little arrow to show its a drop down menu. I dont get it because when I save the file and preview it theres no problems its just when Ive put it on my website is when it doesnt work.

Any ideas

Im also having a CSS problem to the font-family and font-size wont change

my code is
#body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 28px;

If anyone has any ideas about that

Thanks for your help

Answer 1

If someone points out that your image is named in a really stupid way, don't tell them "that's what it's called"; say "you're correct" and rename it.



Also, like you were told already when you asked pretty much the exact same question for the first time, you need to upload the image along with the website.

If you preview this on your computer, the browser finds the image inside the same folder as the HTML document and will display it. If you now add the code to your website, and look at it, the browser will again look for the image, but this time on the server you put the code on. And since the image never got there, it won't show up.



You haven't told us how exactly you're adding the code; are you pasting it somewhere? Or are you uploading the html document?

You can in theory upload the image on http://imgur.com and state the full URL as src, but in the long run you'll want to put the images on your own server.

Answer 2

Hi,



For the CSS I'm seeing that your are trying to change font size of body.



so it should changed like this.

body {

padding: 0;

margin: 0;

overflow-y: scroll;

font-family: Arial;

font-size: 28px;



if you start with '#' that means you are calling for a ID.

EX: Test message



Understand bellow styles.



body {color:#000;} /* Change font color */

#style {font-size:18px;} /* change font size */

.morestyle {font-weight: bold;} /* will bold the text */





Image issue.



If you are using a linux hosting server consider about case of file name.

In windows PC's it is not a problem of using capital letters / simple letters for image names.



But when it comes to linux server you should type image name as it on file name.



Good luck.

Answer 3

Are you sure that the image has been uploaded to the remote server where your website is hosted?



Secondly, are you certain your image should have two png extensions on it (Arrowdark.png.png)?