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

Remove unwanted script from WP Header

I’ve noticed that WordPress adds tons of unwanted script to the header. I totally get why, but for highly focused themes, I like to remove as much as I can. This decreases page load times, eliminates render-blocking resources, and optimizes the First Link Priority Rule. The Script Using the script below, add it to your… Read More

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: <?php echo do_shortcode(‘[gravityf0rm id=1 name=ContactUs title=false description=false]’); ?> You can also add the embed codes: Basic <?php gravity_form( 1, false, false, false, ”, false ); ?> This snippet will… Read More