Backgrounds add personality and style to your website when they're used correctly, but they can be very distracting when they're used incorrectly. Two basic design principles should be followed for a background; the background should load quickly, and it should complement, not carry, your site's design.
Backgrounds come from several sources, but they tend to be colors, photographs, graphics, or illustrations. Although less common, backgrounds can also be animated.
While it has become an acceptable practice to use a large image as a background, it is important to remember that when you're creating a background image, you should compress it to make it as light as possible. This is often accomplished by simply using an 'export for Web' type option in the image-editing software.
If you only need to change the color of the background, as opposed to placing an image there, you can control the image through your CSS stylesheet.
Changing Background Color in CSS
Place this code inside your stylesheet to change the background color of your page. Remember to use a background color and a text color with enough contrast so the text is always easy to read.
Or, you can use the hexidecimal code if you prefer.
If you need to override the stylesheet for a particular page, use inline-style coding.
Changing Background Color in HTML
With the introduction of HTML5, the option to change the color from inside the HTML tag by using the bgcolor attribute is no longer an option. The change reflects the movement to use CSS to control all HTML styling.
Before the implementation of HTML5, you could change the page color this way:
Although, this method still works for older browsers, the code will eventually not render as users continue to upgrade to newer browsers.
Web Safe Colors
In the early years of the Internet, designers adhered to the practice of only using web-safe colors because these colors rendered the same across all monitors. Many of today's monitors can render millions of colors, but they don't all render the 216-color palette of non web-safe colors equally. So if you are concerned about that, it is still safer to use the web-safe palette if you need your colors to be as close as possible to what you designed and render equally across browsers and devices.
Backgrounds from Images
To include a background image, you will need to control one or more of the various descriptions associated with the background property. These include:
- Background-color - Controls the background color to be used
- Background-position - Controls where the image is positioned
- Background-size - Controls the size of the background image (introduced in CSS3)
- Background-repeat - Specifies how to repeat the image vertically, horizontally, or both ways
- Background-origin - Controls positioning area of the image (introduced in CSS3)
- Background-clip - Specifies painting area of the background image (introduced in CSS3)
- Background-attachment - Controls whether the image scrolls or is fixed
- Background-image - Specifies the image(s) to be used
Generally speaking, you will use the image, repeat, and position descriptions most often. However, the best practice is to also declare a color with the background color description in case the background image fails to load.
Using Small Images to Create a Pattern
Tiling an image is a common method of creating a website background. This method builds a background by repeating an image horizontally, vertically or both horizontally and vertically. Common reasons for using this approach are to create a textured look, create lines and shadows, or add depth to a page.
When using CSS, these background-repeat attributes will tile your image:
- Repeat-x to repeat image horizontally
- Repeat-y to repeat image vertically
- Repeat to repeat image both horizontally and vertically
- No-repeat to avoid repeating the image
Your stylesheet coding would look something like this:
background-image:url("images/my_background.png"); // this is the image you want repeated
background-position:left top; // this places the first instance of the image in the top left corner
background-repeat:repeat-x; // this causes the image to repeat from left-to-right
You could also declare all background attributes in one statement:
background: url('images/my_background.png') repeat-x top left;
Using Large Images as Backdrops
When large images were first placed on web pages, it was a common practice to slice the image into small pieces so the image would appear on the page quicker. However, that practice is no longer considered the best approach because each image splice represents a call to the server. Overall, those multiple calls slow down your site. If you're using a large image, simply compress it down to the smallest possible size that still maintains the image's clarity.
One popular trend is to use one large photograph, often centered, as the background image. This creates a powerful and intriguing look for a site, provided the image does not overtake the page. Images, either blurred or in-focus, become the content's backdrop and pull the user in when they're properly designed. Sites that succeed with this look tend to use images that have a natural 'opening' for text.
To place a single image as the background, place this in your stylesheet:
background-color:#FF0000; // you should always include a color in case the image is unavailable
CSS3 allows multiple images for the background:
background-image:url("images/my_background.png"), url("images/my_second_background.png"); //just separate the backgrounds with a comma
Background Do's and Don'ts
Here are some tips for creating great backgrounds.
- Keep images light; this usually means 10KB or less for backgrounds, 60KB for headers and 100KB for high-quality images.
- Use background images/graphics that complement the design.
- Make sure your image/design will accommodate larger screens.
- Don't create clutter by using a 'busy' background.
- Don't rely on background to carry site's design.
- Don't reduce color contrast to the point that text is hard to read.
Load Time Matters
Mobile devices altered the playing ground even more when it comes to background images. Users accustomed to high-speed Internet connections are somewhat impatient when downloading content on a the much slower 3G or 4G networks. High speed Internet can reach speeds of 15 Mbps or more compared to about 10 Mbps for 4G and less than 4 Mbps for 3G. So when you're designing a site, create a mobile-only version, or make sure your images, background and other features are light enough to download quickly.