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

Adding the_excerpt in WP

How to add auto excerpts to a WP Theme: For this example, I’m using the WP Bootstrap Starter theme (remember to create a Child theme, or you will lose any edits after you update). You need to locate content.php file, it should be under the template-parts folder: Find the code: Approx. line 33. Replace with:… Read More

HTML sitemap w/o a WP Plugin

Have you heard about HTML sitemap? Well, it offers easy navigation for your website visitors. To be more precise, it’s the bulleted outline text version of a website. The visitors can use the sitemap to easily find/locate any topic which they can’t find searching through the whole website menus. The best part is that HTML… Read More