Can photos be placed behind text, as background?

  • Author
    Posts
  • #267058

    kbassler
    Member

    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.

    thanks!

    #267416

    vivianpaige
    Member

    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.

    #267418

    vivianpaige
    Member

    Nevermind. I think you are talking about this blog. http://kjbpod.wordpress.com/

    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.

    #267435

    demyanlavor
    Member

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

    #267448

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

    #267455

    vivianpaige
    Member

    Bookmarked for future reference :)

    #267457

    1tess
    Moderator Emeritus

    Wow! That is cool!

    #267468

    kbassler
    Member

    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: http://kjbpod.wordpress.com/wp-admin/post.php?action=edit&post=883

    thanks,
    kpod

    #267471

    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>

    #267472

    kbassler
    Member

    Great – thanks!

    kpod

    #267506

    1tess
    Moderator Emeritus

    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.

    #267507

    1tess
    Moderator Emeritus

    Sorry, not “?w=, just ?w=NUMBER OF PIXELS

    #267510

    @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.)

    #267511

    1tess
    Moderator Emeritus

    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.

The topic ‘Can photos be placed behind text, as background?’ is closed to new replies.