A Web Designer’s Guide to Selecting the Perfect Background Image

Backgrounds have long been a key ingredient of a well-designed website. Trends in modern design have put even more emphasis on them. They are now expected not only to frame the content, but also to ensure the visual separation of different sections of a page.

When using images for your background, it is best to choose carefully. The wrong choice can really throw your message. Not to mention the possible negative impacts on accessibility

Having this in mind, let's explore some good practices for choosing and implementing background images.

1. Accessibility Comes First

The first question you should ask yourself when considering a clutter is: What effect will this have on readability? content? You must ensure that the text is legible and that when combined with the background, an acceptable contrast ratio is set.

If you are not quite sure of accessibility but you really like a particular image, there are some things you can do to make it work. You can use photo editing software or even CSS style sheets to edit elements such as opacity and contrast, or add layer masks to make the content more readable. It is also important to choose the correct font and font size for the content itself.

 Garden flowers on wood "src =" https://cms-assets.tutsplus.com/uploads/ users / 30 / posts / 29814 / image / flowers.jpg "/ > </a><figcaption> <a href= Garden Flowers on Wood

The bottom line is that your decor should never interfere with the ability of a user to see correctly your content.

 Genuine Underwater Ray of Light "src =" https://cms-assets.tutsplus.com/uploads/users/30/ posts / 29814 / image / water.jpg "/> </a><figcaption> <a href= Real Ray of Light Under Water

2. Photos must be relevant and clean

Photos have become very popular on the Web and are an excellent choice for covering large areas. It is a good idea to choose photos that are relevant to your website in one way or another. This could mean a photo of your physical location, product or service. But you could also look for something that will help you convey the message of your content. Background images should be considered as part of your overall branding strategy.

 Batumi Adjara Georgia Panorama Aerial view of Urban Cityscap "src =" https://cms-assets.tutsplus.com/uploads/ users / 30 / posts / 29814 / image / skyline.jpg "/> </a><figcaption> <a href= Batumi, Adjara, Georgia Panorama, aerial view of the cityscape

You will also need to look for pictures that have open space (think of a horizon or a field of grass) .A cluttered photo can take away your content, even with changes in opacity or color. can not use action pictures or other convincing images.It's more avoid images that are too overwhelming.

 Waterfall in Alaska "src =" https: // cms- assets.tutsplus.com/uploads/users/30/posts/29814/image/waterfall.jpg"/>[19459008'
<figcaption><a href=Waterfall in Alaska


3. Use subtle, transparent textures

Textures can add a touch of class to the overall look of your website. Whether you are using a specific page background or content area, look for transparent textures that is, they can repeat a pattern on the screen to give it the appearance of a big picture. Although you can sometimes use a full-size textured image, the most detailed ones do not always work well on multiple screen sizes. In addition, images with a large file size can negatively affect the loading time of the page.

 Dark Patterns "src =" https://cms-assets.tutsplus.com/uploads/users/30/posts/29814/image/pattern-dark.png "/> </a><figcaption> <a href= Dark Patterns

Subtlety is also a desired quality in a texture (unless you think the idea is not to overwhelm users with bold patterns: look for images that have softer lines and colors that contrast well with the content.

 Minimal Geometric Patterns "src =" https: // cms-assets. 
<figcaption> <a href= Geometric Minimal Patterns
4. Consider Multiple Screens and Peripherals

The visible area of ​​a background can change dramatically over multiple screen sizes. This can have an effect on the photos. What may look simply beautiful on a widescreen monitor can also look horrible on a phone. The key parts of the image can be cut off and cause something that loses its context.

The challenge here is the photo selection and the part code. First, look for the images that fit the desired landscape portrait square format of the parent container. They are more likely to evolve well for smaller screens.

 Smart Phone Technology Connection Technology Concept "src =" https://cms-assets.tutsplus.com/uploads/users/ 30 / messages / 29814 / image / phone.jpg " /> </a><figcaption> <a href= Telephone Smart Phone Technology Connection Concept

You will also want to look at how your website CSS manages images. background for different screens.For example, using the CSS property background-size: cover; CSS makes sure that the full image is visible. probably, adjustments will have to be made so that everything looks pixel-perfect on all devices.

 Group of Diverse People Concept of Community Friendliness "src =" https: // cms-assets, tutsplus.com/uploads/users/30/posts/29814/image/portrait.jpg"/>[19459008Äù19459011"<a href= Diverse Group of people Community Togethern ess Concept

5. Start with high resolution images, then crop

When you download images that you plan to use for your background, choose the highest resolution available. This will allow you to make the necessary changes, and then crop the image to a more appropriate size. You will want to make sure you save the edited versions as a separate file.

 Dark Textured Projector Fund "src =" https://cms-assets.tutsplus.com/uploads/ users / 30 / posts / 29814 / image / spot.jpg "/ > </a><figcaption> <a href= Fund of Dark Color Projectors

Determining the appropriate size will depend on the image Although some images stretch or repeat themselves quite well ( which has the advantage of using transparent textures), others may appear distorted, in this case, crop the widest width you will need. Media queries to call in smaller versions from an image for other screen sizes.

 Vintage Effects for Photo or Designs "src =" https: //cms-assets.tutsplus .com / uploads /users/30/posts/29814/image/vintage.jpg"/></a><figcaption><a href=The effects of vintage photography or drawing

Bring Backgrounds In the Foreground

It is understandable that with so many exciting technologies influencing web design, we tend not to pay as much attention to history. But they play a very important role in storytelling and help us create a nice user interface. Backgrounds on a full page help set the tone for a website, while section backgrounds give our content space to breathe.

Of course, everything works best when we choose images that meet our needs. Images that enhance, without interfering, the ability of a user to consume content. But we should also consider details such as size, aspect ratio and relevance for mobile devices. Remember that details matter, even when there are items used in the background.

Useful Links

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.