How to add a header image in WP

Here is a quick example of how to add a background image to the header of your WordPress website pulling the Feature Image

Featured Image Code:

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="page-sub-header" style="background: linear-gradient(rgba(0, 0, 0,0.6), rgba(0,0,0,0.6)), url('<?php echo $thumb['0'];?>');">
<div class="container">
<?php the_title( '<h1 class="entry-title white">', '</h1>' ); ?>
</div>
</div>

You could also use:

<div class="page-header" style="background-image:url(<?phpecho(($feat_image[0]))?>);">
Isaac Adams-Hands

Full Stack Developer, Digital Marketer, and InfoSec enthusiast. He received his Bachelor’s Degree from the University of Western Sydney and his Business Diploma from Georgian College before joining various marketing positions in search portals, e-commerce, higher education, and addiction recovery services.

Follow @ twitter

Related posts

Website Design; the Process

The web industry is, perhaps, is the most evolving industries by nature. Designers have to keep up with new and emerging trends and advancements so that they can make sure that the website they create is one that serves the brand, the customers, and something that outperforms the competition. While some view it as a… Read More

Call Tracking using GTM

I’ve noticed onClick tracking can be troublesome and sometimes doesn’t work as expected on WordPress websites, so its never 100% accurate. To get around these errors, I use Google Tag Manager to track call events. How to Track phone calls using Google Tag Manager: 1. If you haven’t already, install GTM on your website. 2…. Read More