Styles: Red Explosion Blue Bubbles Green Forest Royal Purple

~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.












    Index | Comment | Contact Us | FAQ's | Link To Us | Site Rules | Thank You | About Us | Book Wurmple's Club | Our Awards
    Our Staff | Original Characters | Pokémon Avenue Fan Club Listing | The Apricorn Times | Vaporeon's Library | Jolteon's Quiz Factory
    Flareon's Art Museum | Sunshine Shoppe | Midnite @ the Movies | Leafeon's Lovely Garden | Glaceon's Cool Treats Truck
    Sylveon's Bowtique | StarEoncyclopćdia | Eevee's Log | Flareon's Journal | Espeon's Diary | A-MAZE-ing | Contests | Fortune Cookies
    Jigglypuff's Rehearsal Hall | Pokémon Crosswords | Pokémon Scrambles | Pokémon Star Version | Star Hunt
    Who's That Pokemon? | Win An Award | Submit Your Works To Us | Help with Bullies & Gossip | Help With A Busy Schedule
    Help With Online Dangers | Help With Virus Prevention | Advice About Anti-Pokemon? | Help With Art Block | What's A Smiley?
    What is Chatspeak? | What is Web Courtesy? | Basic HTML Coding | Colors, Fonts & Symbols | Adding Images
    Tables | Naming Your Site | Making Content Original | Making A Webpage | Choosing A Host | Gaining Affiliates | How To Update
    Avatars & Blinkies | Banners | Button Templates | Headers & Page Dividers | Layouts | Pokémon Plushie Keychains
    Pokémon Orphanage | Pokémon Wallpapers | PokéPlates & Updating Tables | Splashes | Textures | Inactive Affiliates

    Pokémon is © to Nintendo and associated parties, 1996-2015, and is not affiliated with our fan-site in any way.
    All content and images, except official artwork or stated otherwise, on this site is © to Stareon's Hideout, 2006-2014.
    Images and text should not be sold, reproduced, and/or distributed in any way without prior permission.
    To learn more about legally using these fictional works, please contact the web owner.

    Welcome to Stareon's Hideout... where magic begins and everyone is a star!