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

CSS order

Here is how to load a WordPress child theme’s CSS after the parent theme’s CSS. The trick here is to add a 1 to the add_action script, illustrated below Functions.php Find and edit this little bit of code in the Functions.php file: This way your Parent’s CSS loads first, and your Child theme will load… Read More

Fixing the blog page title in WP

If your blog page is pulling the title of the last/latest post, here is a quick and dirty fix Add this to your title tags: Examples: