Resize Backstretch Image

[Mark-C]

Hi All,

I use backstretch on my localhost project. It is based on Minimum Pro. see demo: http://demo.studiopress.com/minimum/
Using the Minimum Pro demo as an example, we can see that it has initially been given an image //demo.studiopress.com/minimum/files/2014/04/bg.jpg with a size of 1600px x 1050px.

Question
When we scale down from a desktop screen requiring 1600 x 1050px to say a Tablet needing 768 x 1024px, how can we load another image for our Tablet?

Issue
At present when we scale down to a tablet or mobile phone, we are still using the large dsktop image, thus effecting pagespeed and bandwidth.
Is there a way to load a new image at different viewports via CSS

Thank You

Mark C

http://localhost

[Jess]

There could definitely be a cleaner solution, but this is how I would get around your problem (this is how we put the full-width home image in this site: http://podcasts.heilsound.com/ -- though if you want the semi-parallax effect, you'll need to modify this approach):

Instead of using the theme's way of adding that image, I would use Genesis hooks (this plugin makes it pretty easy to do that: https://wordpress.org/plugins/genesis-simple-hooks/).

On the Simple Hooks page, go to the genesis_after_header hook and add something like this to the text box (check the 'Execute PHP' box, too):
<?php
if(is_front_page()) {
echo '<div class="my-home-image"></div>';
} ?>

Then you can grab that class and insert your image with some CSS along these lines:
.my-home-image {
background: url("image.jpg") no-repeat center;
}

The background property also allows you to scale your image (details here: http://www.w3schools.com/cssref/css3_pr_background-size.asp), or you could stick in a different background image with media queries.

---

Jess

[Mark-C]

Hi Jess,

Thank you for your reply.
Not sure why i do not get an auto response to any off my posts and feedback.

Anyway, I played around with your technique. In theory, whilst you are able to control the size of the images across different viewports, you end up losing control of the image aspect ratio.

If there is another way to control the <div style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 775px; width: 1903px; z-index: -999999; position: fixed;" class="backstretch"><img src= blah blah blah this would be great.

Thank you

Mark

[Author]

Posts