Work with us

To contact our team enter your details below and we will be in touch as soon as possible.

Download

To download "" please enter your email address below

Menu

06

Sep

Resizing background images perfectly within websites

Resizing background images perfectly within websites
Displaying a background image to it’s full potential at all screen sizes can be a challenge, however it’s a challenge that must be overcome – many businesses rely on showcasing their products using imagery alone. If the focal point of an image is cropped out it can be detrimental to conversions and purchases.

Our development team have put together a variety of solutions to this frequent image issue that coders come across on a daily basis. Hopefully one of these solutions will fit perfectly into your next project.

Using CSS3

The background-size property allows us to resize images easily. All modern browsers support this, so unless you are catering for an older one such as Internet Explorer 7/8, this will be okay to use.

Stretch

Scale to specific width & height.
.stretch { background-size: 100px 200px; }

Stretch Content

Scale to height & width of element.
.stretch_content { background-size: 200px 300px; }

Resize Height

Scale specific height whilst keeping aspect ratio.
.resize_height { background-size: auto 200px; }

Resize Width

Scale specific width whilst keeping aspect ratio.
.resize_width { background-size: 200px auto; }

Resize Cover

Scales to height and width of element whilst keeping aspect ratio, will crop off part of the image.
.resize_cover { background-size: cover; }

Resize Contain

Scales to height and width of element whilst keeping aspect ratio, will cause a gap if aspect ratio is different to the image.
.resize_contain { background-size: contain; }

In our experience, background-size: cover; seems to work best out of the variations above. It always covers the available space whilst keeping aspect ratio. All of these options are situational though and can be used well.

Using JavaScript/jQuery

You can achieve background image resizing in jQuery with a lightweight plugin we have used on many of our recent projects. You can download this plugin via GitHub here.

This plugin emulates what background-size: cover; achieves using CSS3, but with the advantage that you can target <img /> tags within your HTML, making it incredibly useful for CMS edibility.

Usage

You can call function and target an image in your HTML within your jQuery using:
$('.my-image').resizeToParent();

If you want to target a specific parent element to resize to, use the parent parameter:
$('.my-image').resizeToParent({parent: '.parent-container'});

See it in action via our CodePen below:

See the Pen
Image Resize
by Matthew Ainsworth (@matt_kolodo)
on CodePen.

Summary

We’d definitely choose the lightweight image resize plugin as the best option in most cases, due to its ease of use and the fact you can target images in the HTML rather than everything being done via CSS.