WordPress Background Image from Featured Image

[techmichelle]

Sharing as I encountered some fun putting these items together

Lines in WordPress page file to pull featured image url and size.
Asks if post (Page) has thumbnail and if so gets information.
$feat_image[0] = URL
$feat_image[1] = width
$feat_image[2] = height
The formula is used to set the ratio then use the ration with vw (viewwidth) to set the min-height needed for image to be 100% wide and keep aspect ratio.

<?php if ( has_post_thumbnail() ) {$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), “full”, true );}?>

<

div>

<

div>);min-height:<?php echo (($feat_image[2]/$feat_image[1])*96) ?>vw” >

You can use CSS to style
#content.backimage {background-color:black;}
#content.backimage #main-content {background-repeat:no-repeat;background-size:contain;}

[Atelierbram]

Thanks for sharing. To have background effects like opacity or css-filters like blur() etc., the element with the background-image has to be absolute positioned, to prevent child elements inheriting this opacity or blur(), which will make text unreadable.

<article class="article article-has-backgroundThumb article-<?php the_ID(); ?>">

<?php if(has_post_thumbnail()) {
 $feat_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "full", true);
} ?>
<div class="backgroundThumb" style="background-image:url(<?php echo (($feat_image[0]))?>);" data-width="<?php echo (($feat_image[1]))?>" date-height="<?php echo (($feat_image[2]))?>"></div> 

On the parent element in CSS:

.article-has-backgroundThumb {
  z-index: 0;
  position: relative;
}

Absolute positioning on the background-image div is crucial:

.backgroundThumb {
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  filter:blur(42px);
  opacity:.75;
  z-index:-1;
}

[jmartigar]

Thank you! This helped me!

[Author]

Posts