2 Key Points When Using Images As Backgrounds

A common website design element that doesn’t always work is the use of images as backgrounds.

Whether it’s a shot of the local mountains or a faded image of the eCommerce store’s brick and mortar counterpart, using images as backgrounds comes with its own risks. You need to make sure that you develop your design appropriately around the image without losing any of your effectiveness.

Here are some of the things you will want to remember.

Remember the Responsive Screen Dilemma

Using responsive website design (Affiliate link) has become quite popular because it adapts the website to whatever device the customer is looking at it from. The downside to this is that it does alter the appearance of your website somewhat. When you use an image as a background, you have to be careful that the image does not distort the text. Often times, a dark portion of the image can obscure the text so that readers cannot read what you have to say.

While you can adjust for this on your regular website, you have to check it on a variety of screens to make sure that the responsive design does not actually shift the image and text around. You can’t check it on every device out there, but you can check it on multiple devices to make sure that it works.

Using Images As Backgrounds In Website Design

Avoid Tiles

One of the options in most web programs includes the ability to set an image to tile so that it appears repeatedly across the website background. As tempting as this may be, don’t do it. It rarely looks professional, and it is almost always distracting.

Whether you have a shirt design website or a sweater eCommerce store, you should use one single solid background image that has been adjusted to create the least intrusive appearance. Tiles cannot be controlled in the same way.

One stylistic exception is the modified tile background. In this, multiple images are included in the background, but they are scattered throughout the page with key areas of negative space for text insertion. It creates a multi focal point background that can be distracting but that can also be quite effective and classy. The images are formatted in a style similar to static buttons without links. To create these, you will have to develop them specifically for that point. You won’t be able to just click “tile” in the background image options.

Using images as backgrounds can be made to work, although if it is not done properly it can distort your web page. Make sure that this doesn’t happen to you.

Your first key is to make sure that you remember how responsive screens alter the appearance of a website. To make sure that it does not distort the site too much, check it on multiple devices.

You should also avoid using tiled backgrounds with images. With the exception of the modified tile background, this almost always winds up being a confusing and ineffective option. The modified tile background allows you to include multiple images while still keeping it sharp.

image credit: http://www.flickr.com/photos/zergev/


Did you enjoy reading this post? Why not signup for instant updates!

Click here to subscribe
  • CareWareIT

    Hey Fabrizio, nice article. I prefer a website with a plain background as it makes it less busy.

    • / Fabrizio Van Marciano

      I agree but I also think it depends how well the background images have been used. Some sites do get carried away with it I think if it compliments the rest of the site cleverly then it can work.

  • Pingback: 2 Key Points When Using Images As Backgrounds |...

  • Pingback: BizSugar.com