(I know how to put a div background image behind a paragraph of text in an ordinary html or php page. I was expecting to be able to do the same in a wordpress page by simply clicking on a button, but found no function alloted to it.)
Except where the pictures are relevant to the presentation of an idea, most wordpress blogs insert some pictures or images within their articles only for the purpose of giving color and appeal to the article. It is eye candy and its attention holding power boosts the chances of the passive visitor to read on or to find some other post or feature that would interest him. It prods the visitor to explore further. Well, at least that’s my take on the matter.
In the wordpress dashboard, it is easy to do this as all you have to do is click the little rectangle (with the ‘Add an image’ tooltip) to the right of the caption ‘Upload/Insert’ below the title box. Then, the picture appears like the one below.
Well, look at that. Isn’t the motorbike simply hot?*
The above image can also be wrapped in a div box, especially if you want it to become a background image to some paragraphs of text.
Image as background to text in a post
Yes, setting a background image to a div is basic HTML. Anyone who has even a superficial knowledge of HTML knows this; that you can have paragraphs of text with a picture behind it as a background image.
Wait, is the color balance thingy really the reason why this ‘background image behind the text‘ effect is not seen often in posts on wordpress sites? I don’t think so. The most probable reason is that it is not a one-click action like the ‘Add an image’ click that we have grown used to. For now, it has to be done manually. If there is an easier way to do this, or there’s actually a built-in feature in wordpress that I just am unaware of, please tell me. The way I inserted the image of a dollar bundle as background to the text here is as follows:
- Click the ‘Add an image’ graphical link next to the ‘Upload/Insert’ caption in the Post dashboard in order to upload your chosen image to your wordpress directory.
- Copy the ‘src’ portion of the resulting code. The src string may look like this:
http://localhost/moralde/wp-content/uploads/2012/99/moralde-dollars.jpg
This is the url/path to the image you want to use. Now, you can delete the resulting code set of the uploaded image written on your content box.
- Then you create a div box upon which you want to put the image as its background and within which you would place your text. The src string you copied earlier is then placed within the url part. The final code would look like so:
<div style="background:url('http://localhost/moralde/ wp-content/uploads/2012/99/moralde-dollars.jpg') no-repeat"> These are the texts which you want to float above the background image. Yada, yada, yada...The div background image is now underneath your wordpress post. <em>The italic text within the div tags being part of the text above the div background image</em>. The <strong>bold text</strong> above the div background image. The <span style="text-decoration: underline;">underlined text within the div</span>. The quick brown fox jumped over the heads of the lazy dogs near the bank of the River Rhine where animal control cannot see them. Yada, yada, yada... </div>
It’s actually the same coding whether it’s a wordpress or a non-wordpress site.
Well, that’s how I did it here. Of course, one could also use the css file to do this. Again, if you have an easier method, or there is a wordpress function or even a plugin for this, let me know by commenting below.
*Hot? What do you think of Joann Krupa here.
That’s look pretty cool, I’m just wondering though where you say “The final code would look like so:” there is nothing there!
.-= Karen @ Blazing Minds´s latest blog ..Check Your SPAM in Your WordPress Comments! =-.
Uh-oh, it looks like the plugin that handles presentation of html code is acting up again. Hold on, I’m going under the chassis to see what’s wrong. 🙂 Sorry for the inconvenience.
That’s cool. I used the same code, in adjusting the css file, to show images behind the heading box, comment box and general blog area. I reckon that you could do the same thing to show an image in all your posts. The only problem would be that every post would have the same image.
.-= Sire´s latest blog ..Giving Your Blog That Christmas Feel =-.
That’s if you use CSS to embed the background image. However, I guess you can go around that by using several IDs, like:
#aaa {
…
}
#bbb {
…
}
The thing with this is that soon you’ll have a very long CSS filled with div ids for every post you want to have a background image. 🙂
The method I outlined above embeds the image right on the post.
While this looks pretty attractive, like what you’ve said, it may
“…cause some text to be hard to read especially in areas where the image pixels approach the color of the text…”
I don’t think it’s fitting for the general reading public unless you’re photo blogging and wanted effects to add but nonetheless something that can drive away readers. Just my $0.02 but other than that, good tutorial.
.-= Mathdelane´s latest blog ..Earn Revenue Playing Trivia and Referring Friends =-.
That indeed is a major issue. That’s why one must have at least an eye for color contrast in choosing the images.
I’ve never thought of doing this but you’ve just given me 101 really cool ideas. This is something that does have a very specific time and a place but when it fits, it adds that little extra flavour.
Thanks for sharing,
Karl
.-= Karl Foxley´s latest blog ..Introduce Yourself and Get Some Link Love! =-.
You’re welcome Karl, glad to know it sparked up some ideas on your side.:)
very nice post bro
I just know this
maybe later I’ll try
.-= willy´s latest blog ..Using Hypnosis for Self Help =-.
Thanks Wil. 🙂
Need to be careful with the image you choose, or else it will only make it hard for readers to read your post and decrease your blog readability.
.-= steppinout´s latest blog ..Download National Geographic’s Wallpapers For Free =-.
Yeah, I don’t think it’s good anyway to use it all the time for all your posts.
Hello
This is a nice post and I want to say that background image looks attractive behind text.I will definitely try for this.Thank you very much for giving such good information to us.
You’re welcome. Thanks for dropping by.:)
This was a nice post. Thanks for the hack
.-= Pavan Somu´s latest blog ..Realpress Multi Coloured WordPress Themes =-.
You’re welcome Pavan. It’s actually basic html.
Thanks for the article dude,
I am really gonna make use of it.
.-= Blog Tips´s latest blog ..Search Engine Optimization for Microsoft Bing – Tips =-.
Background images can be very distracting when below text. You did a nice job with the hundred dollar bill be fading the image.
What motorbike? I only noticed a very hot Angelina Jolie 😉
LOL! I have to try pulling your attention to the bike. In this pic, it tends to become invisible. 🙂
Images are always looks beautiful behind text area but everyone should be careful to choosing the right image because it may create problem in readability.
Just wanted to say your site’s design is brilliant. I like it a lot, and your posts are so cool. Please keep them coming. Thanks!
I bet you say that to all the girls, err… hey, thanks for the compliment buddy. 🙂
.-= james-mdeo´s latest blog ..HTML For Kids =-.
What if you wanted the picture to repeat vertically until the end of the text?
This was HUGE help, thanks alot man.
-Brent
repeat-y