(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.