Resizing featured image used as page background

  • Hi! I’ve created a child theme of Twenty Fourteen (version 1.0) where I only show one post at a time, and the featured image is used as the page background.

    This is my setup in home.php respectively single.php: 

    <style type="text/css">

    body {
                background-image: url(<?php echo $imgURL ?>);
background-repeat: no-repeat;
background-size: 100% 25em;
		}

  </style>

    I know it’s not an optimal solution at all, but it’s the only one I could think of. It does the job okay, but the image is usually stretched (especially when viewed on mobile) and I can’t figure out a way to make it scale appropriately without it either “falling below/underneath” the text block or pushing the post significantly down.

    Can anybody help me?

    Here’s the link to my page:

    https://awkwardsilen.se/blog/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Unless you’re using a large enough image to cover the devices you want you can’t avoid it stretching if you want it to be 100% width

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Just use a CSS width of 100% for the background image, don’t use a height.

    Thread Starter awkwardsilense

    (@awkwardsilense)

    Hi Andrew! Thanks for the speedy reply. I tried only stating the width, but it created a huge gap between the image and the post on the mobile (because .site has margin-top: 25em; as well – if I remove it the post appears in the top and overlaps the image completely. ) and on the web it creates the unwanted effect of the post appearing on top of the lower part of the image.

    I’m letting your suggested settings remain as is, so that you can see the problem. And it’s still possible to see the original stretch-problem by clicking on a single post (for example https://awkwardsilen.se/blog/2015/01/broken-radi-toe-terapisamtal-med-bruce/)

    I don’t mind the image being stretch to full width (as that is the effect I’m after), as long as it doesn’t effect the image ratio!

    Any help is much appreciated ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Right, so it looks like there is no one size fits all solution. Use different ratios at different screen sizes through media queries: https://css-tricks.com/css-media-queries/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Resizing featured image used as page background’ is closed to new replies.