Adding an image to your website page or blog post should help the reader visualize your topic. The HTML image position code information below will help you fine tune the placement of an image in relation to content on your page.

Find the example of what you want to do. Then scrape over the HTML code, copy and paste it into the WordPress page your working on.

Display the image floating on the RIGHT side of the content.

Woman with child checking email<img src="http://www.TBD-URL.com/consumer-250×250.jpg" style="float:right; margin:0px 0px 15px 15px; cursor:pointer; cursor:hand; border:0" width="100" height="100" alt="Woman with child checking email" />

  • In this example the source image is larger (250px wide by 250px high) than the displayed version (100px wide by 100px high).
  • float:right defines that the image is aligned to the right of the text.
  • margin defines how many blank pixels appear between the image and any text around it. You can define pixels in this order: top (0px), right (0px), bottom (15px), left (15px)
  • border:0 means no border is displayed around the edges of the image. If you want a 1 pixel black border, change 0 to 1.
  • width=”100″ displays the image at 100 pixels wide.
  • height=”100″ displays the image at 100 pixels high.
  • alt=”Woman with child checking email” change this to describe what your image is about. Useful for people with visual impairments or viewing the page with a mobile device.

Display the image floating on the LEFT side of the content.

Woman with child checking email<img src="http://www.TBD-URL.com/consumer-250×250.jpg" style="float:left; margin:0px 15px 15px 0px; cursor:pointer; cursor:hand; border:0" width="100" height="100" alt="Woman with child checking email" />

  • In this example the source image is larger (250px wide by 250px high) than the displayed version (100px wide by 100px high).
  • float:left defines that the image is aligned to the left of the text.
  • margin defines how many blank pixels appear between the image and any text around it. You can define pixels in this order: top (0px), right (15px), bottom (15px), left (0px)
  • border:0 means no border is displayed around the edges of the image. If you want a 1 pixel black border, change 0 to 1.
  • width=”100″ displays the image at 100 pixels wide.
  • height=”100″ displays the image at 100 pixels high.
  • alt=”Woman with child checking email” change this to describe what your image is about. Useful for people with visual impairments or viewing the page with a mobile device.

Display the image floating on the RIGHT side of the content.

Image is also clickable – useful if you want to display a small thumbnail version in the page and click to display much larger version in new window.

Woman with child checking email<a href="http://www.TBD-URL.com/consumer-250×250.jpg" target="_blank"><img src="http://www.TBD-URL.com/consumer-250×250.jpg" style=" float:right; margin:0px 0px 15px 15px;cursor:pointer; cursor:hand; border:0" width="100" height="100" alt="Woman with child checking email" /></a>

  • In this example the source image is larger (250px wide by 250px high) than the displayed version (100px wide by 100px high).
  • target=”_blank” means when clicking the image, the larger version will open in a new browser window.
  • float:right defines that the image is aligned to the left of the text.
  • margin defines how many blank pixels appear between the image and any text around it. You can define pixels in this order: top (0px), right (0px), bottom (15px), left (15px)
  • border:0 means no border is displayed around the edges of the image. If you want a 1 pixel black border, change 0 to 1.
  • width=”100″ displays the image at 100 pixels wide.
  • height=”100″ displays the image at 100 pixels high.
  • alt=”Woman with child checking email” change this to describe what your image is about. Useful for people with visual impairments or viewing the page with a mobile device.