How to I layer an image over a text block?

  • Author
  • #1966227


    I am looking to layer images over text blocks and it is proving to be quite difficult. The one image I was able to layer does not show up layered in the preview. Please let me know the correct procedure for layering images. Thanks

    The blog I need help with is



    Hi !

    I don’t quite understand your question. Do you want the text to wrap around the image ? Put the image behind the text ?



    Sorry about that. I think the question has more to do with image alignment. I would like to understand why I am unable to move images a little up or a little down OR what dictates where an image is placed in regards to text.
    I am trying to save space on a blog post by adding an image only partially over a note message box but it seems to go all the way over it or all the way off. Hope this is more clear.
    (and sure, I will take information on how to add images behind text and image wrap as well)


    Moderator Emeritus

    Please link to the post you are asking about, starting with http://
    Your question is not clearly stated and we need to see what you are asking about in order to give you an answer.
    Keep in mind that we are mostly volunteers and as such we cannot view unpublished posts and pages.
    This needs more details so we can understand what you want to do:

    I am trying to save space on a blog post by adding an image only partially over a note message box


    Moderator Emeritus

    Here is a basic article about how to align images and text:



    I am unable to give you the link to the post as it is not ‘pretty’ enough to post.
    Would you know if there are standard size images for posting in Watson Theme? For example, in ‘edit post’ my image is where I want it (right aligned to text). When I go to preview, the image is above text and centred.
    Maybe this is due to the size of the image in regards to the size of posting space? Hopefully this leads us in the right direction…..
    Also, does the information of the image (information added from the library) change the way it behaves in the post.


    Moderator Emeritus

    You can find details about the Watson theme here:

    Quick Specs (all measurements in pixels):

    Watson is a flexible-width, responsive design.
    Slider and featured images should be at least 608 by 400.
    On single posts and the default page template: The main column maximum width is 492.
    On the with-sidebar and sitemap page templates: The main column maximum width is 550.
    On the full-width page template: The main column maximum width is 900.
    All images and video will scale to fit the viewing screen.


    Moderator Emeritus

    Also, does the information of the image (information added from the library) change the way it behaves in the post.

    All images in posts on come from the library (or from url links). None of the pictures are in the articles you publish: there is code to fetch them from your library (or from a url). When you insert an image into a post or page the options determine how you want it to be aligned and indexed by search engines.
    (fill in the alt part so Google et al can “read” the image)


    Moderator Emeritus

    You can place a background image behind a post or page using the text editor and some html. That can be complicated because usually the text will obscure the image and the picture will make havoc of the text.

    You could invite me to view your unpublished post. Perhaps that would help to clarify matters. Or you could add the “modlook” tag to this thread. Staff can view unpublished posts.



    I am sorry but I am unsure of what the “mod look” tag is or how to use it. There is lots of information on what it does but now how to use it so you can check out the blog.
    I appreciate all the help and information above. It is useful.
    I think what I am clear on now is that what you see in the edit post section does not directly reflect the actual published post as its all done in script. So to get images and layout exactly how I like it I must preview often?


    Moderator Emeritus

    The modlook tag here in these support forums alerts staff that there is a user which we volunteers cannot help. Because your post is private or unpublished, and you have not invited me to look at it, we volunteers cannot assist you. The information I gave you might have answered your question, but because your question is not clear to me you’ll have to wait until a staff person sees the modlook tag. If you subscribe, then you will be notified when someone else has a better answer.


    Hi there!

    I’m happy to help you with your images. It looks like you have several draft posts. Can you tell me which one you’re working on?



    The one I am working on now is Scotchrood, Call to Adventure.

    I think I might have a handle on it after the information from 1tess.

    I believe what I need to do is find the fine balance between font size, image size and column size. Its quite tricky as what you see in edit post is not what comes up in preview. Any advice to make this job easier would be helpful.

    Thanks for your help and thank-you to 1tess. Greatly appreciated.



    I am sorry, it was Fast or Fable: LetterWaterloo1815 that needed the work. Like I said above. I think its a matter of trial and error. Please let me know.


    Hi there!

    Sorry for the delay. I do see what you mean. I love what you’re trying to achieve. I can see it’s really frustrating to try and figure out in our editors. :(

    I took a look and moved some stuff around in a test copy of your post. I have a couple of tips for making this work.

    The major one is to make sure that the div class=”alert-note” tags only go around the span tags and the titles themselves. There were two images that I moved in the Text editor that had been included inside of the div tag (before the /div happened). This is what was causing them to overlap with the yellow boxes.

    The next part is about aligning images next to each other. If you’re going to use captions like you did under the second “Fast or Fable” section, the alignment will have to be fixed in the customizer unfortunately. Because the margins are created outside of the editor itself. However, if you add asides as you did in the third “Fast or Fable” section, you’ll be able to adjust the margins within your Text editor.

    Now, the way I was able to figure out and adjust the margins for the images to get them side by side was by using the “Inspect Element” tool in Chrome. Both Firefox and Internet Explorer also have this tool built in. Safari has it as well, although you’ll have to turn it on by going to Safari > Preferences > Advanced and checking the box at the bottom for “Show Develop menu in menu bar”.

    Here’s a quick run down on how to use the Inspector:

    The inspector will usually highlight margins in orange and you’ll just need to adjust them on your images until they don’t overlap anymore. For example the styles I added to the two images under your third “Fast or Fable”:



    I’ve created a new draft post in your dashboard titled “Fast or Fable – Shawna’s edited version”. You can see the various style changes I made there. In order for that image with the caption to work correctly, you’ll need to add this CSS to your Customizer:

    #attachment_651 {
    	margin-right: 6rem;
    	margin-left: 0;

    I know that’s a lot, so let me know if I can help you sort any of that out. :)



    Thank you!Sent from my iPhone Janet S. McLeod


The topic ‘How to I layer an image over a text block?’ is closed to new replies.