Welcome to WeightLossChat.org!   

Advertisments:




Learning HTML - can't upload picture or set it to background?

Learning HTML - can't upload picture or set it to background?

Postby haefen17 » Thu Oct 13, 2011 10:47 pm

I'm writing the text part in Windows Notepad. I've tried opening the page in both Firefox and IE.

When I upload the picture by using <img src=smiley.gif width=59 height=57>
I get a square, but the square doesn't have the image in it -- just a red X. " I tried changing the size bigger but that only made the square bigger, I still can't see the image.

When I try to set a picture as the background by using <body background="clover.gif">
Nothing happens at all. I just get a white background.

I've tried it with other pictures. I've tried .jpg
Nothing is working.
haefen17
 
Posts: 695
Joined: Mon Oct 03, 2011 9:17 pm

Learning HTML - can't upload picture or set it to background?

Postby yehuda » Thu Oct 13, 2011 10:56 pm

Is the image in the same directory as the html file?
yehuda
 
Posts: 697
Joined: Mon Oct 03, 2011 1:44 pm

Learning HTML - can't upload picture or set it to background?

Postby holmes » Thu Oct 13, 2011 11:14 pm

For images and HTML files in same directory, use:

<img style="width: 59px; 57: YYYpx; border: 0;" src="smiley.gif" alt="Text Description">

For images in their own folder, use this:

<img style="width: 59px; 57: YYYpx; border: 0;" src="images/smiley.gif" alt="Text Description">

For other relationships, use:

<img style="width: 59px; 57: YYYpx; border: 0;" src="../images/smiley.gif" alt="Text Description">

Use "../" as many times as needed to tell the browser how far back to go in directory structure to find image.

Background Image Code:

For the body tag example:

body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) no-repeat center scroll;
}

That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.

For a tiled image, change to:

body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) repeat top left scroll;
}

Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".

Inline CSS example: <body style="width: 960px; margin: 0 auto; background: url(image.gif) no-repeat center fixed;">
Inline CSS example: <body style="width: 960px; margin: 0 auto; background: url(image.jpg) no-repeat center scroll;">

Ron
holmes
 
Posts: 692
Joined: Tue Oct 04, 2011 4:51 am


Return to Body Image and Self Esteem

cron