Image scaling in home-top

[quib72]

Yesterday I made a Genesis site with Lifestyle Pro, and placed Home-Top on the homepage as you can see at http://www.proevenmetliefde.nl. But the image scales too small. Is there any solution for this effect? In Home-Top I use Genesis - Featured Widget Amplified.

Thanks in advance!

http://www.proevenmetliefde.nl

[Paul Sandford]

Hi Quib.
Looks like a nice site. Just an idea for you but it will require a little bit of work to prep the banner image further.

Expand your image into a sprite that contains the full width version with the squares featuring strawberries, spices, tarts and tea. That image currently appears to be 1068px wide. Next, further to the right of this wider image, create an alternative version of the banner image that features say just the strawberries and tea and perhaps one final version for the smallest size you're catering for - that might be just the logo and perhaps montage of the other images. You can even make the alternative versions slightly smaller heights within the sprite if necessary to fine tune the design.

Then inside the header which has the responsive width, wrap your banner inside a div where you set a width fixed. Using relative positioning and "right: " for example at appropriate break-points in your style sheet, shift the sprite image to the left so each relevant version of the banner image is shown. At certain points you can remove the fixed width so as it then goes past your mobile-phone size (about 760px you have a break-point I think) it does then start to scale down again but it will be showing a version of the image that's suited to that smaller scale.

Alternatively to using the sprite you could prepare a couple of other versions of the banner in separate images and just change the source of the URL for the background image at the break-points instead of shifting the sprite along.

To experiment put these into your style sheet on the .site-header with just what you have now and you'll see the effect:
width: 1068px;
position: relative;
right: 252px; (toggle this on and off and watch your banner shift across)

You could try a min-width at certain break-points too - you'll get a feel on how you want to manage the appearance of the banner at each point.

Hope that helps.

---

Paul Sandford.  Follow @pm_sandford on Twitter

[Author]

Posts