CODEWITHSUNDEEP
wordpresswordpress-theming
fransBernhard
fransBernhard

Reputation: 362

Responsive background thumbnail

I'm attempting to build a theme in wordpress, but cannot figure out how to make the background image resize when resizing my browser window. When I get the image and set it to 'full', or any of the other preset sizes, I does not resize:

enter image description here

enter image description here

In my front-page-php: 

<?php
    // check if the post or page has a Featured Image assigned to it.
    if ( has_post_thumbnail() ) {
        // the_post_thumbnail();

        $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

        <header id="hero" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center fixed;"></header>

    <?php }
?>

and in my css file:

header {
  max-width: 100vw;
  height: 95vh;
  background-size: cover;
}

And it just simply stays the same.. So thankful for any help!

Upvotes: 0

Views: 655

Answers (1)

Vig
Vig

Reputation: 339

There's an easier way to get the post's thumbnail url. Also, it'd be better to set the background-image property in the style attribute:

<?php
    // check if the post or page has a Featured Image assigned to it.
    if ( has_post_thumbnail() ) {

        // the_post_thumbnail();
        $backgroundImg = get_the_post_thumbnail_url($post->ID, 'full'); ?>

        <header id="hero" style="background-image: url('<?= $backgroundImg; ?>');"></header>

    <?php }
?>

& the CSS should be:

header {
  max-width: 100vw;
  height: 95vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

Upvotes: 1

Related Questions