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(<?php echo (($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

Minimize WP HTML w/o a plugin

Here is the code (adding it to your WordPress’s functions.php file) to minimize your themes HTML code without a plugin. Add to Functions.php

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