Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

<img> tags for a self taught newbie

AloeQ 007

AloeQ 007

macrumors newbie
Original poster
Mar 28, 2010
4
0
Venice, CA
This is my first post on this forum-which has been incredibly helpful in a number of my hang-ups lately, thx! This has probably been answered but I might have not been wording my questions correctly.

My question has to do with <img> tags. I was under the impression at first that you could just use the name of the file.

<img src='squiggles.jpg'/>

I've been using Coda as my text editor and the only way I could get my images to work properly is by adding this much longer version...

<img src='file:///Volumes/Macintosh%20HD/Users/Julie/Desktop/Staring%20Again/Homepage-Laser%20by%20Megan/Squiggles.jpg'/>

There has to be an easier way that isn't so horrible looking! Please help and let me know what I have missed!
 
@spinnerlys, the / is OK, though there should be a space before it for IE (<img src="" />). That's just the XHTML way so that the code is XML compliant.

The likely issue is a matter of the path. When you just use the name of the image, it assumes that image resides in the same folder as the HTML file. If not, then you need to tell it how to get to the image. If it's inside a folder that's in the same folder as the file, then the path looks like "folder/squiggles.jpg" If the folder is a level up, then you can do "../folder/squiggles.jpg" Here's one of a number of articles that explains the difference between relative and absolute paths.
 
Hey thank you for responding so fast!

I think I'm going about this the wrong way... How would a proper css background image look? As of now I have this....

background-image: url(file:///Volumes/Macintosh%20HD/Users/Julie/Desktop/Staring%20Again/Homepage-Laser%20by%20Megan/Squiggles.jpg)

should I keep it in html file or change something in css? And yes I have a copy of the image in the same file as the html file I am working with
 
background-image: url("Squiggles.jpg");

That should work if the JPEG file is in the same location as your HTML.

angelwatt said:
@spinnerlys, the / is OK, though there should be a space before it for IE (<img src="" />). That's just the XHTML way so that the code is XML compliant.
Click to expand...

Neither of them are correct because there's no alt tag ;)
 
Oh Thank You, Thank You, Thank You!!! It worked! I have no idea how I missed something so easy but my code now looks cleaner and that is much easier!
 
You don't want to use the file:// protocol if this page is going to be viewed on any other location but your own machine. It won't work anywhere else because it tells the browser to look for the file on the local machine.
 
It strikes me that you referenced squiggles.jpg in your original code, but you then referenced Squiggles.jpg in the later version - notice the capital S. It's case-sensitive on Macs!! So <img src="Squiggles.jpg" /> would work (as long as everything's in the same folder etc) :)
 
spinnerlys said:
Maybe remove the / after the <img src='squiggles.jpg'/> and is the picture in the same folder as the HTML file?

<img src="image.jpg"> is the proper tag.
Click to expand...

No. The correct tag if you remove the / is:

<img src="image.jpg"></img>

Always, always close tags! Or just use the short hand method which is the / at the end as posted by the OP.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back