Nearly full size background image on website

Question

What would the best user experience be, if I placed a full size image as background on a website? The issue lies mostly when I start resizing it, it should scale down, but since the image is somewhere near 16:9 in aspect ratio, it will look weird in my browser when I try that (mainly because it's so tall).

Would the best user experience be: Set width to 100% of screen, deal with the height automatically?

Since nobody has a device with that size (try resizing your window to be the narrowest as possible, but also 100% tall), so should I care about that?

Answer 1

You should totally care about supporting different screen resolutions, and the way that image will appear on screen to maintain good user experience of the site.

In your case, you should think on serving different image to different screen resolutions by using CSS Media Queries - if you don't know how to use it, consult with a front-end developer in your team. These media queries help you serve smaller images for mobile devices and bigger images for large screens.

I won't suggest you the resizing option, because that causes a lot of issues at the loading time of website, which can result into a bad user experience.

Hope this helps!

Answer 2

I think you're probably looking for this CSS property & value:

background-size: cover;

When you add this to an appropriate element (along with a background image, naturally) it will perform a combination of scaling and cropping to ensure that the aspect ratio of the image stays correct, whilst the image is sized to always cover the entire element.

There are some dirty tricks that can be played to make it work even in older IE if you really have to.

If you combine this with media queries and images optimized for different screen DPI, you can ensure both full coverage and an appropriate quality background image for a particular window size.

Answer 3

These days, the most common use for full-width images I see are hero images.

They take up the full width of the viewport, and their height is maintained in relation to the width. That is, if the image starts out at 2000 x 1000, then when it is resized to 1000 width, the height will be 500.

Aside from hero images, I don't see a lot of images being used as backgrounds. This might be because there isn't a simple solution for having an image be full width and full height.

After all, mobile viewports may not be very tall, but vertical scrolling is much more common than horizontal scrolling, which means that the height of a website is effectively infinite.

One solution might be to have a fixed background image, so that it essentially moves with the viewport as it scrolls - this might be your plan already.

For smaller width screens, I think the best you can hope for is an image that keeps its meaning as the user only sees the middle of it. This lets you keep the full height of the image, but you crop the sides.

A final solution is to find a background colour to sit behind the image that complements it, but there'll always be an "edge" between the image and the colour.