CSS for Beginners – Colours & Backgrounds

Almost every HTML element can be assigned a colour, and many can be given a background (a colour, a pattern or an image). Even if you want your website to be clean, white and modern, you will probably still need to work with colours and, to a lesser degree, backgrounds for text, headers, etc.

Colours and backgrounds can be assigned to HTML elements in a number of ways.

Colour Names

The simplest way to assign a colour to an element is by using CSS colour names. CSS and HTML support around 140 different colour names, from “Red” to “BlanchedAlmond”. Although some of these names are not very obvious (RebeccaPurple?), most of the standard colour names are in there (Red, Blue, White, Pink, etc). Here’s an example of how to assign a colour to an element using an internal style sheet (Note: CSS uses the US spelling – Color):

CSS Colour Values

If you want a more specific colour than “Red” or “Blue”, CSS gives you several ways to define colours using values, from RGB values to HSLA values. CSS colour values are written using numbers, or a combination of numbers and percentages.

There are several ways to find the values of a colour you want to use, but one of the most useful is the Google Colour Picker (https://www.google.com/search?q=color+picker) which displays HEX, RGB, CMYK, HSV, and HSL values for millions of colours.

Here is an example of colour assignment using HEX, RGB and HSL values in an external style sheet:

This would result in the h1 element being white text on a black background, the h3 element has a bright green border, and the p element is purple text on a light grey background.

In the inline CSS example below, both the <h1> and the <p> elements are the same colour, dark blue. One uses the HEX value and the other the RGB value.

It is perfectly possible to mix different types of colour value in your CSS style sheet, but for consistency it is better to choose one and use that throughout.

CSS Backgrounds

As we have seen in some of the examples above, colours can easily be applied to the background of HTML elements with CSS. But there are several other background properties you can use to control how HTML elements are displayed, including adding and positioning images to the background.

Background Opacity

We have already looked at applying background colours above. You can also set an opacity level to a background value using the opacity property. Opacity can be set from 0.0 (most opaque) to 1.0 (least opaque). For example:

The only problem with using the opacity property is that any child elements within the element that has opacity applied will inherit the same transparency level. This can make elements such as text or images difficult to see.

Background Images

You can add images as backgrounds to HTML elements using the background-image property. By default any image you add is repeated to cover the entire element, so there are extra background properties you can use to control repeat and image position. Here’s how to assign an image as an element background:

Background Repeat

By default, images assigned as a background will repeat horizontally and vertically until the element is filled. If you need the image to only repeat in one direction, you can use the background-repeat property:

The examples above show the CSS to repeat the background image vertically (repeat-y), horizontally (repeat-x) and appear without repeating (no-repeat).

Background Position

By default, background images are positioned at the top-left of the element. If you are setting the background image as no-repeat, you can also control its position within the element:

Background Attachment

You can also choose to have the background image scroll with the page, or be fixed into position so the other elements scroll over it. This is mainly used for the background of the body element, or maybe the site header, although it can be used anywhere an element has a background image if desired.

In this example, the background image will be non-repeating, positioned at the top-right of the element, and will not scroll with the rest of the page. To have the image scroll with the page, you could use:

Background Shorthand

As with many CSS properties, you can use a shorthand version to write the background property. Shorthand properties can help to keep your style sheet cleaner and tidier, but the values need to be entered in a specific order. It doesn’t matter if it doesn’t include all possible values, as long as the ones that are included are in the correct order. Writing the example above as shorthand would look like:

The order of background values is: Background-color, background-image, background-repeat, background-attachment, background-position. (Order of values only applies to the shorthand version of the property).

Next – Learn how to apply borders to HTML elements with CSS

Previously – Learn about CSS syntax and how CSS is written

Learn how to insert CSS styles into your HTML documents

Russ Ware

Russ has been testing, reviewing and writing guides for tech since the heady days of Windows 95 and the Sega Saturn. A self-confessed (and proud) geek about all things tech, if it has LED's, a screen, beeps or has source code, Russ will want to master it (and very likely take it apart to see how it works...)

Related Articles

Back to top button