Add a background image into a post [closed]

There are a couple of ways I could imagine to do this. (I’m not sure where you are placing the code mentioned in the question, but if you want the background image to be full-page, the code for the post content, itself, wouldn’t be the correct placement).

This answer presumes you want the background on the single post page, not in the home page listing of posts.

If it’s just one post where you’ll want this, look at the source code of the single post page and decide which ‘div’ (or other element) will have the background. Then, in the CSS, target that element for the background property.

For example, if the specific post id is ‘1234,’ the post/page html might be structured as:

  <body class="post-template-default single single-post postid-1234 ...  >
   <div id="page" class=".... > 
      <header ... >

Then, in the CSS file, place:

 .single-post.postid-1234 #page {
   background-image: url("IMAGE URL");
  }

Also, read up on the ‘background-image’ property for proper sizing, setting repeat attributes, etc. See the ‘background-size’ CSS property for sizing the image, particularly (and note browser compatibility).

If there is frequent need for unique backgrounds for individual posts, look to create a custom meta value for the image url. This would require some php coding to detect and use the image url in each page. Or, search for a plugin that may provide this capability.

Related Posts: