How To Set Wordpress Background Image Div

Permit'south say we're building a site for a client who would similar to take a background image behind the title of their blog posts. That's easy plenty. Just set a background image on the containing div with CSS.

.header-wrap {   text-align: eye;   groundwork:url('../img/augusta.jpg');   padding: 40px 50px; }

How to Prepare the Featured Prototype every bit a Background Paradigm in WordPress

What if the client wants the power to select a custom background paradigm for each weblog post? Perhaps the client wants to use the Featured Image of the post every bit the background image behind the title of the blog post (much like the image below), and they would like to exist able to practise this on their own through the WordPress admin surface area.

This is how we can go about meeting the needs of the client.

Note: We'll assume that featured images (or 'post thumbnails') are enabled in our theme, which is pretty standard functionality for WordPress themes. If we are building our ain, we'll desire to include add_theme_support( 'mail service-thumbnails' ); in the functions.php file for our theme.

1. Edit Template Files Used to Brandish Individual Blog Posts

What we will do is edit our template file(due south) and so that the Featured Image is displayed as a background epitome with inline styles. In our case, nosotros'll edit the single.php file which is used to display individual blog posts. We have the post title being displayed in an h1 tag, which is wrapped by a header element and a div element. We'll add our style to the wrapping div with the grade of "header-wrap."

<div class="header-wrap">   <header class="entry-header">      <h1 form="entry-championship"><?php the_title(); ?></h1>   </header> </div>

two. Call up the Featured Prototype

First, nosotros need to recollect the featured image. We'll practise this by using the wp_get_attachment_image_src part. This role requires that you pass in the id of the paradigm as a parameter, which we will get with by using the get_post_thumbnail_id function. Nosotros will include the id of the post as a parameter for get_post_thumbnail_id (which we remember using $post->id), even though in this case, we'd still get the desired result if we didn't include it. The 2d parameter is the size of the image. The default is 'thumbnail,' but we want the full size of the original paradigm, so we use the keyword of 'full.' For a custom size, pass in an array, something like array (600, 200), which would be 600 pixels past 200 pixels.

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>

The wp_get_attachment_image_src function returns an array that includes the url of the prototype, the width in pixels, the height in pixels, and a boolean, true if the image has been re-sized, or false if the image is original size. We'll use a variable named $backgroundImg to hold the returned results.

All we really demand for our purposes is the url of the paradigm. It'southward the starting time item in the array, so nosotros'll reference information technology similar so:

$backgroundImg[0]

3. Add the Groundwork Prototype

Next, we'll add our background prototype using inline CSS with a little PHP to echo out the background url. (You could besides use the background-image CSS holding instead of background). I've also added no-echo to the inline way to prevent our image from displaying more once.

<div form="header-wrap" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat; ">   <header class="entry-header">      <h1 class="entry-title"><?php the_title(); ?></h1>   </header> </div>

4. Utilize CSS to Adjust the Brandish

I've added a bit more CSS to make our title display a little bit better over the background image.

.header-wrap {   text-marshal: middle;   padding: 40px 50px; }  .header-wrap h1.entry-title {   font-weight: 400;   color: #FFF;   font-size:3em;   line-top: 1.2em;   text-shadow: 1px 1px 2px black; }

Full Code Block to Fix the Featured Image equally a Background Image in WordPress

And here's the full code block that you place in your template file. In our case, the template file is single.php because we want this effect on single blog post pages, and our theme has a single.php file. If y'all aren't certain which file you lot need to edit for your detail needs, refer to the WordPress Template Hierarchy Chart.

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($mail service->ID), 'full' );?>              <div class="header-wrap" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat;">      <header class="entry-header">   	<h1 class="entry-title"><?php the_title(); ?></h1>      </header>   </div>

At present, you should take the featured epitome of the post displayed equally a background image. If you're putting effort into your blog posts, so it makes sense to integrate them into other areas of your website. Depending on your customers and concern, this could exist on the homepage, specific production or service pages, or some other expanse. If you want to show them on the homepage, this tutorial will tell you how to display recent blog posts on the homepage in WordPress.