Backgrounds are a HTML, CSS, and WikiText Attribute. This guide will teach you how to make a solid background. Once you've figured out solid colors, you can begin exploring more advanced types of backgrounds.

If you want a Gradient, repeating (using Background Size), or Image background, go to the corresponding page.

Background Code

For solid color backgrounds, add "background: COLOR;" to your CSS. Then, replace COLOR with a Hex code, named color, or RGB/RGBA code. For example, background: lavender; will give you a lavender background.

Here's how the code looks inside a div:

If you have text in the area with a background color, you'll need to make sure people can read it. You can do this by controlling:

• Text color: Choose a text color with enough contrast so it's easy for viewers to read. For example, color: black;
• Padding: You'll want some padding so there's space between the edge of the box and the text. For example, padding: 10px;

Put it all together and it'll look something like this:

Solid Color Backgrounds

The below examples show you how to make a solid-colored background with a div style tag. To use them, simply replace the color stated with a color of your choice! To make these into span style tags, simply replace all instances of "div" in the code with "span".

Blue

Code:

<div style="background: LightSteelBlue; color: black; padding: 10px;">Text here</div> 

Green

Code:

 <div style="background: green; color: white; padding: 10px;">Text here</div> 

Pink

Code:

 <div style="background: MistyRose; color: black; padding: 10px;">Text here</div>

Teal

Code:

<div style="background: teal; color: white; padding: 10px;">Text here</div>

Red

Code:

<div style="background: DarkRed; color: white; padding: 10px;">Text here</div>

Orange

Code:

<div style="background: orange; color: black; padding: 10px;">Text here</div>

Purple

Code:

<div style="background: purple; color: white; padding: 10px;">Text here</div>

Gradients

You can use CSS gradients as backgrounds. Here's an example:

Code:

<div style="background: radial-gradient(DodgerBlue, DarkBlue, MidnightBlue); color; white; padding: 10px; text-align: center;">Text here</div>

Once you've learned a bit about gradients, you can code things like this:

Accessibility and readability

A good coder always thinks about accessibility and readability. Designs should be easy on the eyes, not distracting or overwhelming. That means pleasant color choices for backgrounds.

Here are some ways to do that:

• Choose subtler colors, not neon ones. Too-bright colors can make people's eyes hurt.
• Keep backgrounds simple. They shouldn't distract readers from your text.
• Make sure text contrast is good. The text color should be very different from the background color, so it's easy to read.

These are difficult to look at:

While these are nice:

A good background doesn't challenge readers, strain their eyes, or make them want to look away. Instead, it makes designs pleasant and welcoming. Good color choices can make people happy to view your work.

See also

• Accessibility
• Fonts
• Gradients
• Image Backgrounds