Hi-de-ho, here’s one for you all…
I’m trying to set the ‘Featured Images’ as a background (rather than simple an inline image) so I can overlay content using .css positioning.
I’ve so far managed to tweak the default header.php so the default image displays as a background image, but I’ve not been able to do the same for the ‘Featured Image’ as the php embeds it as html i.e. <img src=”images/foo.jpg”>
Unfortunately my basic php skills are not quite up to the job.
Here’s the dev site (with the image displaying as a background img via css):
And here’s a page with a ‘Featured Image’ (which is displaying the img via the standard html img tag – with content than forced into position with the css):
While this works I know it’s a hack and want to do it properly.
Here’s the code from header.php
<?php // The header image // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) && $image >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); else : ?> <div id="backgroundImage" style="background:url(<?php header_image(); ?>);"></div> <?php endif; // end check for featured image or standard header ?> <?php endif; // end check for removed header image ?>
It’s working properly after the ‘else’, it’s the bit before (get_the_post_thumbnail) that I think is the problem, I just need it to return the featured image URL, but in a similar div.
Any pointers appreciated 🙂
- The topic ‘Set the header image as a background (rather than an image)’ is closed to new replies.