Need help? Check out our Support site, then

Can photos be placed behind text, as background?

  1. I'd like to be able to have images float behind text in some of my posts. Is this possible, and if so, how do I manage it? I don't want text wrapping around my picture, I want it written over the picture itself.


  2. How about we start with a link to your wordpress.COM blog? The reason for asking is that we cannot tell if your blog is hosted here and without that information, we may be giving you the wrong answer.

  3. Nevermind. I think you are talking about this blog.

    Short answer - there is no way to do it here. Best bet would be to put the text on the photo before you upload it.

  4. I don't think so,but if it's passable I want to know how!

  5. Actually it IS possible:
    <div style="background-image:url(IMAGE_URL_HERE);">TEXT_HERE</div>

  6. Bookmarked for future reference :)

  7. Wow! That is cool!

  8. Hey panaghiotisadam, I tried that and it worked, sort of. I got a strip of my photo with the text overwritten. Am I doing something wrong so that the whole photo doesn't appear:


  9. When you want to show us something, you must give the link to a published post: we cannot access your dashboard.

    Anyway I know what you're talking about, and sorry, I hadn't experimented with that trick enough. The code I gave above makes the background adjust to the text (cropping the image, if the text is short, or repeating it in the opposite case). To avoid either of these, you must restrict it to the actual dimensions of the original image, this way:
    <div style="background-image:url(IMAGE_URL_HERE);width:NUMBER_OF_PIXELS_HEREpx;height:NUMBER_OF_PIXELS_HEREpx;">TEXT_HERE</div>

  10. Great - thanks!


  11. panaghiotisadam,
    Your method resized the pic but it's stuck on the top left, even if you try to put in background-position?
    This worked for me on today's post:
    <div style="background-image: url(IMAGE URL?w=NUMBER OF PIXELS); background-position: center center; background-repeat: no-repeat; text-align: center;">TEXT AND PICTURES HERE</div>
    After IMAGE URL put "?w= to size the pic, then stipulate background-position (I don't think I need both centers?), background-repeat (repeat-x, repeat-y, or no-repeat)
    I'm working on a post for tomorrow with a vertical image repeat.
    OH! and unless you type in html, use shift-return for line breaks, or the div style starts all over again.

  12. Sorry, not "?w=, just ?w=NUMBER OF PIXELS

  13. @1tess: Yes of course, you can add various commands for positioning. But I hadn't found the proper way to force no repeats (I had tried repeat "none" or "0"), so I resorted to the above. Thanks for the greatly improved version! (And yes, the second "center" has to go.)

  14. background-repeat: repeat-x; gives you a tiled row. And "-y" a tiled column. It took me a while to understand that you don't put in a number for x or y.

    Hmmm. I just tested the "center center", and you are right, the second "center" is not needed. But if you put in "center top," the image starts with the text at the top of the imgage! Just plain "center" starts the text in the middle of the image. "bottom" works too.

Topic Closed

This topic has been closed to new replies.

About this Topic