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

Installing Roots Trellis / Bedrock / Sage

Not sure how I feel about Roots.io –> The tutorials seem super easy, but I noticed you can quickly run into issues. What doesn’t help is that I can’t really find any reviews / user tutorials past 2016, the Roots discourse forum appears to be a bubble (not accepting new or differing ideas), and I… Read More

Add a shortcode to add_shortcode in functions.php

This drove me a little crazy one afternoon. I had to add a gravity forms shortcode to a new add_shortcode script in functions.php To accomplish this, I added this to my code: ‘ . do_shortcode($content) . ‘ Here is how it looks in its working example. I work best by watching. Too many people just… Read More