Avoid Common Mistakes Made with Dark Backgrounds

Dark color schemes can create a sense of seriousness and calm, and they work well as a way to draw attention to vibrant and colorful portfolios. However, dark color schemes and backgrounds present a unique set of challenges for designers.

Here are three common pitfalls to avoid if you’re designing a website with a bent toward the dark side.

Use Lots of Whitespace

Whitespace doesn’t have to white. When we talk about whitespace in reference to web design what we are referring to is the space between elements on the web page.

Dark color themes call for more whitespace between elements than lighter color schemes. So increase the line height of your paragraphs and lists, and be careful to create a minimal design when working with dark colors.

Use Contrasting Colors

When selecting colors for type and other elements to be used over a dark background use a color that contrasts pretty strongly with the background color. However, don’t go too far with contrast. Having pure white text on a pure black background can create a very uncomfortable reading experience.

Let your own eyes and those of your colleagues guide you. Select a color that contrasts strongly but is not uncomfortable to look at.

Avoid the Biggest Mistake Made With Dark Backgrounds

What is the most common mistake made with dark backgrounds? Using a dark image for the background, a light color for text on the web page, and failing to set a compatible background color as a fallback in case the background image doesn’t load.

While that mistake might not sound very bad, failing to carefully select a background color that is compatible with the rest of the elements on a web page can create major usability issues.

Why Is Setting a Background Color Important?

If someone views your website and the background image doesn’t load they will be shown the background color set for the element in question. So if you are using light or white text on a dark background image and the image doesn’t load, the default background color of white will be displayed unless a background color has been set.

The result of failing to set a suitable background color can be a website that is completely illegible.

What you intended to show up as this:

.good_example {
padding: 20px;
background: #333333 url(“../../wp-content/uploads/dark_embroidery.png”);
overflow: auto;
color: white;
}

A short paragraph of text. Just two quick sentences.

Now a second short paragraph. However, this one’s a bit longer. Three sentences this time.

May actually show up as this:

.bad_example {
padding: 20px;
background: ;
overflow: auto;
color: white;
}

A short paragraph of text. Just two quick sentences.

Now a second short paragraph. However, this one’s a bit longer. Three sentences this time.

What you can’t see is that the same text actually appears in both boxes. However, in the second box, the image didn’t load, no fallback color was specified, and, as a result, the white text is shown over the default white background.

How to Set a Background Color

You can use CSS to set a background color using either the background-color property or the shorthand background property.

Keep in Mind: If you do opt to use the background-color property, be sure to specify it after you specify the background-image. If you specify the color first the rule will be overwritten by the image rule, and when the image fails to load the default white background will still load. Alternatively, just use the shorthand background property as we describe in this article to avoid the potential issue entirely.

CSS Background Properties

There are eight background properties contained in the CSS specification:

  1. background-color: Sets a background color.
  2. background-image: Identifies an image file to be used as a background image.
  3. background-position: Tells the browser where to place the background image relative to the element which contains the image with values such as center, center-top, bottom-left, and so forth.
  4. background-size: Used to define the size of a background image, to tell the browser to scale the image to fill the entire element (cover), or to shrink it down so that it fits within the element (contain).
  5. background-repeat: By default, background images repeat horizontally and vertically until they fill the entire element to which they are applied. This property is used to modify that behavior.
  6. background-origin: Used to tell the browser whether the element’s content edge, padding edge, or border edge should be the point at which the edge of the background image is placed. By default, the edge of the image is positioned at the padding edge.
  7. background-clip: This property determines if the background image or color should cover just the content area or include the padding or border areas. By default, the padding area is covered by the background image or color.
  8. background-attachment: Used to determine whether the background should scroll with the viewport or remain fixed while the content in the viewport scrolls up and down.

The default values of the position, size, repeat, origin, clip, and attachment properties are set such that in most cases it is not necessary to specify values for those properties.

For most typical background design scenarios, specifying a background image and color is enough.

Using the background-color Property

Before using the background-color property to set a fallback color, first we need to load the background-image. To load a background image the following code is used:

background-image: url("image.file");

With our background image set, we are ready to select and specify a fallback color. First, we should take a minute to look at our background image and identify a suitable fallback background color. Here is our image, courtesy of Subtle Patterns:

Dark embroidery background image

Looking at our image, the hex color #333333 is a very close match to the colors in the image, and would be a good option for a fallback color.

background-image: url("image.file");
background-color: #333333;

Using the CSS in the code block above, if for some reason the background image fails to load the background color #333333 will be displayed in its place. As a result, while our website may suffer a minor design shortcoming, our website visitors won’t be subjected to usability issues.

Using the Shorthand background Property

We can specify the background image and color simultaneously by using the shorthand background property. The syntax for the background property allows the background color, image, position, size, repeat, origin, clip, and attachment to all be defined in one rule like this:

background: #color url("image.file") position size repeat origin clip attachment;

While we don’t have to specify every value when we use the background property, the order does matter. So be sure to place the values in the proper order when using this property, but don’t feel like you need to specify a value for every property.

In our case, we’re only concerned with the color and image, and we could use the following line of CSS to set cover both at once:

background: #333333 url("../../wp-content/uploads/dark_embroidery.png");

The default values for all of the other properties are adequate to ensure the image is repeated across the entire visible background of the element to which we apply this CSS rule.

Now if something happens to our image file and it fails to load our visitors will still be able to view the content of our website without any difficulty. Just to make sure, let’s intentionally mistype the name of the image file and see what happens:

.final_example {
background: #333333 url(“wrong_file.png”);
padding: 20px;
overflow: auto;
color: white;
}

A short paragraph of text. Just two quick sentences.

Now a second short paragraph. However, this one’s a bit longer. Three sentences this time.

While that may not be the exact look we were hoping to achieve, usability has been preserved and our website visitors will continue to use our website while we get the background image back online.

The background pattern used in this article is from Subtle Patterns