So, I'm totally new to WordPress and trying to "convert" a static site to a WP theme.

I have a page where I'd like to use the featured image as a background for a div.

I was wondering what is the best way or whats the convention to do that?

It doesn't matter if its a featured image or whatever, I just want the user to be able to change the image from the dashboard.

I'd shy away from inlining if possible, so is that the only option?

  • Hi. Welcome to WPSE! Do you have skill in HTML or PHP? This requires some skill in these two. – Jack Johansson Jul 1 '17 at 0:21
  • Thanks! Yes, I do, although I'm not that advanced in php – lastnoob Jul 1 '17 at 1:52

There's two possible options in creating a stylesheet from a dynamically generated value. The first options is Inline stylesheet, as follows:

<div id="hero" 
  style="background-image: url(<?php // TODO retrieve image here. ?>); ">

And the second options is to use an Internal stylesheet, and possibly the best solution out of both. Using stylesheet internally requires you to have your div an identifier possibly assigning the ID, or class, code as follows:

<div id="hero"></div>

The Internal stylesheet:

    #hero {
       background-image: url('<?php // TODO retrieve image here. ?>');
       background-position: 50% 50%;
       background-size: cover;

Using External stylesheet to retrieve and assign the value of the image from the database is impossible. You can still use external stylesheet for the rest of the styles of your div; i.e. #hero, and have the image be retrieve and assign via inline/internal stylesheet.

| improve this answer | |
  • Not entirely impossible, you can add CSS to the list of files passed to the PHP parser. – Chris Cox Aug 9 '17 at 11:15

Obviously, since you want a different background image for every page, you cannot include the css in a static file. You will have to generate it on the fly.

The easiest way would be to include the css between <style> tags in your template files. The other answers show you how to do this.

The most 'WordPressy' way would be different, namely to handle this in your functions.php file as virtual stylesheet using wp_add_inline_style. Essentially this means you are adding some statements to an already existing css file. Your styling will end up in the head of the page, where it belongs, in stead of the body (which works, but is semantically incorrect).

So, in your functions file you would have, for instance:

add_action ('wp_enqueue_style','wpse271934_add_styles');
function wpse271934_add_styles () {
  global $post;
  $extra_styling = '';
  if (is_page() || is_single ()) {
    $image = get_the_post_thumbnail ($post->ID,'large');
    if (!empty($image))
      $extra_styling = '.post, .page {background:url(' . $image . ');}';
  // assuming style.css has the handle 'main_style' in your theme
  wp_add_inline_style ('main_style', $extra_styling);

In the above example (which I didn't test, so watch for bugs) we are adding the background image to single pages and posts. But you have more possibilities. For instance testing for 404 pages and defining a background image for that, insert a certain background if there is none, do different things for different category pages and so on. So, apart from being the most correct approach this also gives you most possibilities to control your backgrounds.

| improve this answer | |

Here is an example of in-page styling. :)

<?php get_header();          

     <div id="primary" class="content-area">
       <main id="main" class="site-main" role="main">

          // Start the loop.
          while ( have_posts() ) : the_post();

           if ( has_post_thumbnail( $_post->ID ) ) { ?>

            /* dynamic img url */
            background: url(<?= get_the_post_thumbnail( $_post->ID,'large' );?>);

            /* full width */

            /* half height */
            height: 50%; 

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

              <div class="featureimg"></div>
              <div class="title"><?php the_title();?></div>
              <div class="content"><?php the_content();?></div>

            // If comments are open or we have at least one comment, load up the comment template.
              if ( comments_open() || get_comments_number() ) :

            // End the loop.

         </main><!-- .site-main -->
       </div><!-- .content-area -->

    <?php get_footer(); ?>
| improve this answer | |

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.