~Adding Images~

Transparent Images | Image Sizing | Image Positioning

Transparent Images

On Paint Shop Pro or Photoshop

Step One: Open up Paint Shop Pro or Photoshop if you have that program available.
Step Two: Cut the background or white space around the image that you want to make transparent. Press alt+delete to get rid of it.
Step Three: Choose the option "transparent" and save. You'll notice the background will look checkerboard until you open it on your browser.

Alternative Programs

Don't have Paint Shop Pro or Photoshop? Try these online image editing sites instead.

We recommend experimenting with these:
  • Iaza
  • PicMonkey
  • LunaPic
  • Online Image Editor

  • Image Sizing

    You may have a large image that you want to use but only a small space to use it. By altering the size you'll solve that problem.
    Problem:The image is too large for the webpage. Let's say it's 400x 400. You only have space for 230x230.
    Solution: Cut the size down. You can open the image in a program such as Paint and go to Image>Stretch/Skew. You can put in the correct percentage that you want to decrease the image by in the "Horizontal" and "Vertical" boxes.

    Because the original size was 400x400, it makes more sense to cut it down to 200x200, instead of an odd 230x230. When your image has been cut down to the correct size, try it out with the rest of your layout. If there is too much white space, you may want to add 15px of color on each side of the image to make a border. This will take care of the extra space and not affect the size of the cropped image.

    Or you can change the part of the code where it says border="0." If you change it to have a border, then there'll be no problem.

    But, what if don't want to make the image smaller using a program? Did you know there is a code you can put in to change the size of the image? Yes! The code is below. Where it says height="dimension" and width="dimension" replace "dimension" with the size you want the image to be. In the previous example, you'd put 200 for height and width.

    Image Positioning

    So now you have a transparent animated image that is just the right size, right? But, where can you put it? If you've browsed the web for any length of time, you'll notice after a while what looks good and what doesn't. You may notice that some images don't go with the page or they are not aligned properly with the text. Well there is a solution to that problem. If you have an eye for layouts and you've got a good idea where your image should go, now all you need is the code to get you there.

    Floating Images

    float right You see how this image is to the right with the text surrounding it? This was made using a code in the style sheet. It only will float images to the right if they are marked as "right." This way you can select which image should float to the right and which shouldn't. The code is below. It must be used in your webpage's style sheet to work correctly.

    Style Sheet Code:

    Where it says "right" in your code, you can change it to left and you can change the "left" to right. The padding indicated how close the text will appear next to your image. I choose 10px as a nice even number. You can change that to whatever you'd like.

    Image Code:

    Where it says class="right" can be changed if you change it in your style sheet. If you change the img.right in your style sheet to img.left or vice versa, you must make sure your image's tag is classified correctly.

    Image Alignment

    align right You want you image to be on the right, left, or center? Just use the code below and replace "alignment" with right, left, or center. Try it out and your image should appear accordingly.