Wrapping Text Around Images

Last Updated on Mar 28, 2013

One of our frequently asked questions is about positioning images that are embedded onto custom pages or blog posts. Here is a guide to help you make this adjustment.

 
Floating Your Image
 
First you need to upload an image and place it in your page. Add the image just before the first character in the paragraph you'd like to wrap around it by placing your cursor there and clicking the "upload image" button. When it loads, it should push the text down to where the image ends.


 
Next, select the image and align it to the left or right using the Paragraph Align buttons.


 
Now your text should flow around the image. If it doesn't, you may have accidentally added empty paragraphs around your image because you didn't insert it at the right spot. Try again or see our alternative solution below.



Alternative solution: If it's still not working properly, you can click the HTML Source button (looks like "< >") and add the following code inside your image tag (before the "/>") using either left or right wrapping:
class="left" style="float: left;"
  
 

Spacing

If you want to add some spacing around your image, you will just need to add a bit of custom CSS. The spacing you're adding is called "margin" and can be defined on the top, right, bottom, and/or left. Just insert the desired amount of spacing and you’re all set (ie: margin-left: 20px).

To do that, click the HTML Source button (looks like "< >"), find your image within the HTML, and add your margin styles to the "styles=" area right after your "float" style. For example:
margin-right: 20px; margin-bottom: 20px;


 
 
 

Virb Support

Can't find your answer in these articles? Don't fret. We're here to help.

 

Community Discussions

You can also ask a question in our community discussion to get answers from other Virb customers.

Psst! Not seeing a feature listed in these articles? You'll need to upgrade to the new Virb Platform.