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

Add a Gravity Forms shortcode in WordPress (PHP)

To add a Gravity Form shortcode in the header, page, footer templates… pretty much anywhere in the theme, just add this code in your PHP file. Gravity Forms Code: You can also add the embed codes: Basic This snippet will display the form with an id of ‘1’; the title and description will not be… Read More

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