I am making my own theme from a Bootstrap 3 site that I designed. How do I best implement images that I defined in the CSS in WordPress so that I can change them later and they reference the media library?

Specifically, how do I get the background image here mockup site with background image

to display in my wordpress theme?

wordpress site with no background image

specifically, the CSS I'm using to pull the flower image is

.herobox {
background: url("http://i.imgur.com/cJKKR3Q.jpg") ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -1;

Obviously this isn't a viable solution if I want to be able to change the picture later from wordpress, which I'll be doing for the blog pages.

So my question is, how do I call up that background image? Do I do it with or without CSS? Where should I place the image to reference it?

Thanks for your help

  • You want the image to be uploaded by the theme owner or just replacing the image URL in code directly?
    – m4n0
    May 13 '15 at 2:56

Multiple solutions for defining the images ->

Post Thumbnails

While creating a new post, you can set the Featured Image which will automatically set the post image.

Since your image is full width, you need to set the size of the thumbnail using: https://codex.wordpress.org/Function_Reference/the_post_thumbnail

Media Upload

  1. Go to Media -> Add New. Upload your image and after upload is complete, click on Edit.

  2. On the right hand side, copy the File URL in the save metabox and replace that URL in your CSS. You can view the list of all images in Media -> Library later on.

This solution is for editing the code directly.

Advanced Custom Fields

If there is a need to allow an image uploader directly replace this image, you need to use Advanced Custom Fields Image upload field and refer that field in your header.php file for the src attribute.

  • 1
    Or Post Thumbnails
    – ngearing
    May 13 '15 at 3:11
  • May I know why I got some downvotes?
    – m4n0
    May 13 '15 at 4:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.