We all know imagery sells, and we love ours big, bold and striking – which you can probably tell from our website. It is a technique we like to use in much of our design – both print and online, however known to be a little tricker with the latter, due to the use of Adobe Flash or bad browser support. However now that Flash is dying out and browser support has improved dramatically, we are finally in a place where we are able to use large images which change based on the size it is being viewed at – keeping the design looking as it should. Here is a quick tutorial detailing some of the methods we use to give your websites the bigger picture…
For images being used within content, an “” tag can be used to embed the image.
Using this along with the CSS3 property “max-width” with a value similar to “100%” will set the image to occupy the maximum space it has available for it – if it is within a box for an article which has a size of 600px (pixels), the image should occupy this space. With fluid templates being used now, this enables the image to expand or contract, so that the full width of the image is always in view.
This does mean that the height is variable to the aspect ratio of the image, so if the images height is half the width, it will stay at this proportion.
For fullscreen backgrounds, we currently opt for a dynamically scaling box, set to the full width and height of the viewport, with the desired background image, followed by the CSS3 declaration for “background-size: cover”. this enables the image to scale while not leaving any letterbox spacing around the image.
For Internet Explorer 8 and below support, include the following to your background box.
*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fullBackground.jpg’, sizingMethod=’scale’);*
* -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fullBackground.jpg’, sizingMethod=’scale’)”;*
The dynamically scaling box will require help from technologies such as JavaScript for Internet Explorer support,
*That’s enough for now, we can’t go giving away all our secrets!*