Correct Positioning of Background Images

Posted on Updated on

One of my favourite parts of any implementation is the branding. Working with the customer’s teams to shape the appearance of the application is often very rewarding. The colour schemes are often pre-set (as there’ll be a corporate style guide setting out the colour palette with strict rules about the situations in which each should be used) however companies can be a bit more creative when it comes to the background image.

Pattern/Abstract Image

If you’re going for a pattern or something abstract, it’s pretty simple. Here’s the latest Redwood branding from the Oracle demos (which actually looks really nice):

We don’t want any gaps showing around the edges if user’s computer screen resolutions are different though (on home or work devices). How do we deal with that? Just make sure the image uploaded is really big. Here’s Oracle’s actual background image with the red box showing what’s visible on my screen:

It’s pretty safe to assume not many will have a screen resolution so large that gaps are showing around the edge of this background image.

Photo Background

Photos are great choices for a background and give a really impressive result. Ideally you want it to sit nicely along the bottom of the screen, but this is tricky to achieve as different screen resolutions invariably mean:

  • some people (with low/small res screens) have the bottom of the photo cut off
  • some people (with high res screens) have a gap underneath the photo

Say this striking building in South Korea was your company HQ and you wanted it as your background.

Photo by hohyeong lee on Unsplash

Depending on the resolution on user’s work and home computers, they might well see one or other of these:

Left: bottom of the photo is not visible
Right: unsightly gap at the bottom of the photo

The simple solution is to use a tiny piece of styling code in a simple personalisation to anchor the bottom of the image to the bottom of the user’s viewport – that is, their visible area of the screen. I’m sure there are several ways of doing this, however I favour the CSS background position property.

The result is a background image that sits correctly against the lower edge of the screen:

Advertisement

This entry was posted in Customers, UI.