DIV Background Image for WordPress Post

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

background imageWell, 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.

Perhaps it is not a good practice anyway since the image behind may cause some text to be hard to read especially in areas where the image pixels approach the color of the text. This is probably why I don’t see this effect in wordpress sites. Nevertheless, with a good eye for color balance, I believe the effect can enhance the beauty and appeal of an article page.

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:

  1. 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.
  2. Copy the ‘src’ portion of the resulting code. The src string may look like this:


    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.

  3. 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/
    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...

    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.