Latest web development tutorials

CSS Backgrounds (Background)

CSS background properties are used to define the background of HTML elements.

CSS properties define the background effects:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background color

background-color property defines the background color of the element.

Background color of the page to use in the body selector:

Examples

body {background-color:#b0c4de;}

try it"

CSS, the color values ​​are usually defined in the following manner:

  • Hex - such as: "# ff0000"
  • RGB - such as: "rgb (255,0,0)"
  • Color names - such as: "red"

The following example, h1, p, and div elements have different background colors:

Examples

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

try it"

Background image

background-image attribute describes the background image elements.

By default, the background image is tiled repeatedly displayed to cover the entire element entity.

Page background image setting examples:

Examples

body {background-image:url('paper.gif');}

try it"

Here is an example of a bad combination of text and background image. Text poor readability:

Examples

body {background-image:url('bgdesert.jpg');}

try it"

Background images - horizontal or vertical tiling

By default, the background-image property is tiled in horizontal or vertical orientation of the page.

If some images tiled horizontally and vertically, so it looks very coordinated, as follows:

Examples

body
{
background-image:url('gradient2.png');
}

try it"

If an image tile (repeat-x) only in the horizontal direction, the page background will be better:

Examples

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

try it"

Background Image - Set position and not tile

Remark Let the background image does not affect the text layout

If you do not want the image tile, you can use the background-repeat property:

Examples

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

try it"

The above example, the background image and the text appears in the same location, in order to make the page layout more reasonable, does not affect the reading of the text, we can change the location of the image.

Background-position property can be used to change the image in the background here:

Examples

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

try it"

Background - shorthand property

In the example above, we can see the background color of the page through a lot of attributes to control.

To simplify the code for these properties, we can use these attributes are combined in the same property.

Shorthand property background color for the "background":

Examples

body {background:#ffffff url('img_tree.png') no-repeat right top;}

try it"

When using the shorthand property, the order of attribute values ​​as ::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

All these attributes do not need to use, you can use according to the actual needs of the page.

This example uses CSS described previously, you can view the instance: CSS Examples

Examples

More examples

How to set a fixed background image
This example demonstrates how to set a fixed background image. Image will not scroll with the rest of the page.

CSS background properties

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。