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:

    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.

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

24 comments

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

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

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

  4. 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 =-.

    1. That indeed is a major issue. That’s why one must have at least an eye for color contrast in choosing the images.

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

  11. 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 😉

    1. LOL! I have to try pulling your attention to the bike. In this pic, it tends to become invisible. 🙂

Comments are closed.