Question

Hi I’m trying to achieve what this website does with their big black and white image: http://oldbarbershop.com.au/

As you resize the browser window from the corner, the image resizes so that the whole picture fills the whole frame proportionally. Does this require a specific jquery plugin? or CSS3? I’ve seen many solutions such as setting the image background-size: 100%, but those don’t exactly ‘resize’, rather just fill the whole frame.

Thanks for the help!

Answer 1

Try background-size: cover

which specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area”