CSS Backgrounds

CSS Backgrounds

With CSS, any element can have a background and border applied, and certain properties affect how they appear

Every HTML element has a background layer that is transparent by default, but can be filled with a color, image, or a gradient. In an element, everything except the margin area is considered the background.

CSS background properties are used to style the background effects of an element or a web page.

CSS has five different background properties we can use. Let's look at each of them

1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment

CSS Background Color

The background-color property specifies the background color of an element. It is mainly used when we need to change or set the background-color of a web page or an element.

Example

body { background-color: yellow; }
Watch GIF Try It Now

Setting CSS Background Color with HEX Values

You can actually use the HEX values to set the CSS colors

HEX value - like "#ff0000" RGB value - like "rgb(255,0,0)" color name - like "red"

Lets see an example to understand more about setting colors in CSS using HEX values

h3 { background-color:#ff0000; } p { background-color: #00ff00; } div { background-color: #0000ff; }
Watch GIF Try It Now

CSS Advanced Background Color Values

Setting CSS Background Color With RGB Values

.box { background-color: rgb(215, 116, 51); }

The above css background-color example will produce the following output

Watch GIF Try It Now

Setting CSS Background Color with HSL or HSLA

HSL or HSLA color values.

.box { background-color: hsla(127, 47%, 38%, .8); }

The above css background-color example will produce the following output

Watch GIF Try It Now

If we don't specify a background color, the element by default will have a transparent background

CSS Background Image

Background images are used for decorative things like textures, list markers, buttons, and icons, sometimes as a full page background image on a website or a header.

CSS Background image property sets the background image displayed in an element. Background images are specified with a URL value that uses the URL functional notation to tell the browser where to find the image.

The URL we specify can be optionally enclosed with either single or double quotes, and can also contain white space before or after the optionally quoted URL.

By default, the image is repeated so it covers the entire element.

CSS Background Image Property Example

body { background-image: url("http://p1.pichost.me/i/20/1433003.jpg"); }
Watch GIF Try It Now

If the image we specify cannot be displayed--for example, the URL doesn't load, or the image no longer exists in the directory--the browser will treat the background image as if it's value was none, and it will display a transparent background.

By default, a background image is repeated or tiled both horizontally and vertically so that it covers the entire element.

CSS Background-repeat Property

Specifies how a background image will repeat itself within a box.

Possible Values

inherit

repeat (default) - tiled, repeating the image both horizontally and vertically.

repeat-x - repeating the image horizontally only.

repeat-y - repeating the image vertically only.

no-repeat - not repeating the image at all, showing just one instance.

The default value for background-repeat is "repeat." The background image is repeated both vertically and horizontally so that it covers the entire background image painting area. Now, if we only want the image to repeat horizontally on the X axis, we could use the value "repeat x" The value "repeat y" repeats the image vertically on the Y axis.

#title { background-repeat: repeat-x; }

Let's look at an example of how we can change the css background with the background-image and background-repeat property

CSS Background Image repeat Example

body { background-image: url("/images/chrome.gif"); background-repeat: repeat; background-position: right top; margin-right: 200px; }
Watch GIF Try It Now

You can also repeat the background image both vertically and horizontally as well

CSS Background Image repeat Horizontally Example

To repeat the css background-image horizontally you need to specify background-reapt property as repeat-x like this: background-repeat: repeat-x;
body { background-image: url("/images/chrome.gif"); background-repeat: repeat-x; background-position: right top; margin-right: 200px; }
Watch GIF Try It Now

CSS Background Image repeat Vertically Example

To repeat the css background-image vertically you need to specify background-reapt property as repeat-y like this: background-repeat: repeat-y; body { background-image: url("/images/chrome.gif"); background-repeat: repeat-y; background-position: right top; margin-right: 200px; }
Watch GIF Try It Now

If we do not want our background images to repeat or tile, we'll need to use the value "no repeat" like this background-repeat: no-repeat; no repeat places the image once in the top left corner and it does not repeat it in any direction.

body { background-image: url("/images/chrome.gif"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; }
Watch GIF Try It Now

CSS Background Position Property

By default, a background image's initial position is the top left-hand corner of the containing element. We can control this position with the background-position property which accepts position keywords along with length units and percentages. The first value in background position determines the position in the X-axis or horizontal position. So, int below example we'll use the keyword "Center." which positions the image in the center of the containing element. Other x-axis keywords are "left" and "right."

CSS Background Position Property Example

body { background-image: url("/images/chrome.gif"); background-repeat: no-repeat; background-position: center; }
Watch GIF Try It Now

CSS Background Attachment Property

With the background attachment property, we can determine whether or not the background image scrolls along with the containing element and content or if it stays fixed to the viewport area and never moves.

CSS Background Attachment Property Example

CSS introduced three different attachment properties such as scroll, fixed and local

Scroll

The background image scrolls within its containing element, so it moves up and down the page along with everything else.

.scroll { background-attachment: scroll; /* This is the default value */ }

Try It Now

when the page is scrolled the background image also scrolls along with the content.

Fixed

The value "fixed" keeps the image fixed to the viewport so that it doesn't scroll with the page.

CSS Background Attachment Fixed Property

.scroll { background-attachment: fixed; }

Try It Now

Local

A new value recently introduced in the w3 series "Backgrounds and Borders Level 3" module,is "local."

CSS Background Attachment Local Property

.scroll { background-attachment: local; }

Try It Now

The value of local is not yet supported in Firefox at the time of this recording, but Safari, Chrome, Opera, and IE9 and above do support it.

Finally, instead of having to write each of the individual CSS declarations every time we want to use a background color, image, position, and so forth, we can instead merge all of them into one shorthand property-- the background property. background: When using the background shorthand property, the common order for the property values is the background color, background image, background repeat, background attachment, and the background position properties.

CSS Background Shorthand Property

/* Shorthand Property */ background: #E9967A url('/images/kitten.png') no-repeat center; }

Watch GIF Try It Now

Practice with Our Interactive Live Editors and Take your CSS Skills to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 4 Exercise 5

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM