HTML help

Discussion in 'General Discussion' started by Lumpy, Oct 25, 2006.

  1. Lumpy

    Lumpy Taylor Swift Actionmaster Super Mod

    Joined:
    Sep 3, 2002
    Posts:
    18,920
    News Credits:
    29
    Trophy Points:
    292
    Likes:
    +33
    ok, im teaching a class on HTML to middle school kids, and they are using pictures as backgrounds and i cant for the life of me remember how to resize the background picture...im having a major brainfart...help please...
     
  2. Skor

    Skor I HATE U TRASH MONSTAAAR! TFW2005 Supporter

    Joined:
    Jan 16, 2003
    Posts:
    4,832
    Trophy Points:
    216
    Likes:
    +0
    Using CSS or plain old school HTML?

    Using CSS-type inline styles it would be:

    <div style="background-image:url(/image/imagename.gif);
    background-repeat:repeat;
    width:200px;
    height:200px;">
    </div>

    *edit* Actually, the HTML part below was wrong. Two secs.
     
  3. Lumpy

    Lumpy Taylor Swift Actionmaster Super Mod

    Joined:
    Sep 3, 2002
    Posts:
    18,920
    News Credits:
    29
    Trophy Points:
    292
    Likes:
    +33
    that doesnt seem to be working....
     
  4. Skor

    Skor I HATE U TRASH MONSTAAAR! TFW2005 Supporter

    Joined:
    Jan 16, 2003
    Posts:
    4,832
    Trophy Points:
    216
    Likes:
    +0
    You'll have to excuse me, as I mostly use CSS now and My head is thumping, but to change the size of an image you normally include it in the image tag, like so:

    <img src="blah.jpg" width="200px" height="100px" alt="Blah image" Title="Oh well, it's blah!" />

    But to resize using just HTML for a background... I can't quite recall. I certainly don't think it's the given method anymore. You could size a table, and that would squash the image, like so:

    <table height="100" width="150" background="/image.jpg" >
    <tr>
    <td>TABLE CONTENT</td>
    </tr>
    </table>

    But I don't think that's what you're after either. Sorry matey.
     
  5. Xaxis

    Xaxis Well-Known Member

    Joined:
    Jul 1, 2002
    Posts:
    2,048
    Trophy Points:
    207
    Location:
    33, 158
    Likes:
    +31
    You can't resize a background image using HMTL or CSS. The only properties of a background image that can be controlled via CSS are attachement, position, and repeat.

    Resizing the element that the image is the background of (as in Skor's example) will only result in resizing the element itself, not the background image.

    It's bad practice to resize an image using HTML anyway, so I'd avoid teaching that approach altogether.

    To resize the background image, use an image editor.
     
  6. Lumpy

    Lumpy Taylor Swift Actionmaster Super Mod

    Joined:
    Sep 3, 2002
    Posts:
    18,920
    News Credits:
    29
    Trophy Points:
    292
    Likes:
    +33
    ok, thanks...its been awhile since ive done this stuff and i just started teaching a class...the kids can have tiled backgrounds for now, itll be fine...and i was only teaching them how to resize using html because that is how it was suggested to me to teach them...but this is only my first year teaching, ive got plenty of time to refine and remember everything...thanks guys...
     
  7. Xaxis

    Xaxis Well-Known Member

    Joined:
    Jul 1, 2002
    Posts:
    2,048
    Trophy Points:
    207
    Location:
    33, 158
    Likes:
    +31
    No problem. I work with it everyday. :) 

    Whoever advised you to teach resizing through HTML shouldn't have. It can lead to oversized files being used where they shouldn't be and weighing down a page with heavier downloads than necessary. Teach them to always use an image sized appropraitely for its intended use. :) 

    If you want to teach them how to have non-tiled backgrounds, then a little bit of CSS using the background-repeat style attribute can help. Settings are:

    repeat this will be a normal, tiling background
    no-repeat this will prevent the background from repeating
    repeat-x makes the background repeat across the page
    repeat-y makes the background repeat down the page

    You could use that in a style sheet or in the body tag itself. Example of use in the body tag:

    Code:
    <body style="background-repeat: no-repeat;">
    You might also want to look into the background-position attribute.

    Have fun! :) 
     

Share This Page