Have 'stretch' or resize-to-fit option for skin images

[Gordon McLeod]

Having done some testing with the new skins feature on Mahara dev I thought it would be useful to be able to auto-resize the image to fit the background in a scalable way. Currently the options are to tile horizontally, vertically, both or none - but there are times when repeating the image doesn't look right, and background colours can be messy if the image used doesn't quite fit the available space. While the current options are fine if you are using a small image with repeatable edges (a technique I use for theme design for other sites) it doesn't work if you use a larger image that isn't designed with repeating in mind.
Thanks, Gordon.

[Robert Lyon (robertl-9)]

There is a css option

 background-size: cover;

that scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. http://www.w3schools.com/cssref/css3_pr_background-size.asp

However the background-size property is only supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+ and not IE 8.

but saying that I notice that IE 11 was launched last week so we could probably drop support for IE8 so then we could use this css option :)

[Gordon McLeod (g-mcleod1)]

Thanks Robert,

I've still to get to grips with the css options but that sounds like a solution. Might be worth having a comment or tooltip to that effect beside the tiling options for images, but I guess we could end up with too much information overload clutter on screen.
My own institution still have IE8 for the next 6 months but I think we'll drop it like a hot brick when Microsoft support for it officially ends next year - roll on that day!

Regards, Gordon.