Can photos be placed behind text, as background?

kbassler · Member · Sep 20, 2008 at 4:04 am
Copy link

Add topic to favorites
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!
vivianpaige · Member · Sep 20, 2008 at 4:18 am
Copy link
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.
vivianpaige · Member · Sep 20, 2008 at 4:23 am
Copy link
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.
demyanlavor · Member · Sep 20, 2008 at 6:30 am
Copy link
I don’t think so,but if it’s passable I want to know how!
panaghiotisadam · Member · Sep 20, 2008 at 1:35 pm
Copy link
Actually it IS possible:
<div style="background-image:url(IMAGE_URL_HERE);">TEXT_HERE</div>
vivianpaige · Member · Sep 20, 2008 at 3:32 pm
Copy link
Bookmarked for future reference :)
1tess · Moderator Emeritus · Sep 20, 2008 at 4:16 pm
Copy link
Wow! That is cool!
kbassler · Member · Sep 20, 2008 at 10:42 pm
Copy link
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
panaghiotisadam · Member · Sep 20, 2008 at 10:59 pm
Copy link
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>
kbassler · Member · Sep 20, 2008 at 11:02 pm
Copy link
Great – thanks!

kpod
1tess · Moderator Emeritus · Sep 22, 2008 at 6:07 pm
Copy link
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.
1tess · Moderator Emeritus · Sep 22, 2008 at 6:09 pm
Copy link
Sorry, not “?w=, just ?w=NUMBER OF PIXELS
panaghiotisadam · Member · Sep 22, 2008 at 6:52 pm
Copy link
@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.)
1tess · Moderator Emeritus · Sep 22, 2008 at 8:20 pm
Copy link
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.

No items found.