Backgrounds

Quick Code

Copy to clipboard

<div style="background:powderblue;">Text here</div>

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:

<div style="background: lavender;">Example</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:

<div style="background: lavender; color: black; padding: 10px;">Example</div>

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

Text here

Code:

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

Green

Text here

Code:

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

Pink

Text here

Code:

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

Teal

Text here

Code:

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

Red

Text here

Code:

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

Orange

Text here

Code:

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

Purple

Text here

Code:

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

Gradients

See also: Gradients and User blog:MissLunaRose/Luna's Quick CSS Gradient Guide

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

Text here

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:

background: linear-gradient(PowderBlue, Azure); color: black;

background: radial-gradient(cornsilk, tan); color: black;

background: linear-gradient(to right, DarkSlateBlue, SlateBlue, SteelBlue); color: lavender;

background: repeating-linear-gradient(to right, Ivory 0% 10%, Linen 10% 20%); color: black;

Accessibility and readability

See also: Accessibility

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:

Screaming Green

Can you read me?

PINK EXPLOSION!!!

While these are nice:

Easy green

Readable yellow

Gentle pink

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