Blurred background for non-covering photos

[krislawton]

As an alternative to just having a black background, it might be good to have a second copy of the image in the background that covers the entire page and is blurred. Seems to be a common design pattern in modern times for showing images that don't have the same aspect ratio as their container.

Here is an example I drew up:

Without blur:

With blur:

Here's a better example of a portrait image on a landscape display:

To do this, I added a copy of the "cloud" HTML element and set its background-size to cover, and its filter to blur(50px). Not sure how performance-intensive this is for mobiles nor how widespread the filter style is implemented on browsers, but it has been on my Windows Chrome browser for at least a year. The new cloud element needs to be before the existing one in the DOM or else it overlaps.

I could probably look at implementing this myself if there is a consensus, would take some familiarisation and setting up a dev enviro though.

[ubershmekel]

This is what I did with tagsyo.com

I wouldn't be against it if the implementation was simple. With tagsyo, I used the thumbnail as the background, so the blurry image loads faster.

[MrSpiffyClean]

As long as there is an option to revert back to the black (or solid color, if changes are going to be made there) border, I wouldn't be bothered. I personally find it a bit distracting, but I mainly use this on desktop, so your mileage may vary.