CSS Background (Background)

CSS background properties are used to define the background style of an element. CSS background refers to setting background properties for an object through CSS, such as setting various background styles through CSS.

Background properties

CSS provides several properties for an element's background, such as:background-color,background-image,background-repeat,background-attachmentandbackground-position.The next section will introduce how to use these attributes to set different styles for the background one by one.

Background color

background-colorattribute is used to set the background color of an element.

The following example demonstrates how to set the background color of a webpage.

body {background-color: #f0e68c;}

Colors in CSS are usually specified by the following methods:

• Hexadecimal values-For example, "#ff0000"

• RGB values-For example, "rgb(255,0,0)"

• Color names-such as "red"

ViewCSS color namesto get a complete list of possible color names.

Background image

background-imageattribute sets the image as the background of an HTML element.

See the following example, which demonstrates how to set the background image for a page.

body {background-image: url("leaf.jpg");}

background repeat

By default, thebackground-imageattribute to repeat the image in both horizontal and vertical directions.

By usingbackground-repeatThe attribute allows you to control how the background image is tiled in the background of an HTML element. You can set the vertical (y-axis), horizontal (x-axis), bidirectional, or double-directional repeating background image.

See the following example, which demonstrates how to set a gradient background for a webpage by repeating the image slices horizontally.

body {
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

Background attachment

background-attachmentThe attribute determines whether the background image is fixed relative to the viewport or scrolls with the containing block.

body {
　　　　width:　250px;
　　　　height:　200px;
　　　　overflow: scroll;
　　　　background-image: url("recycle.jpg");
　　　　background-attachment: fixed;
　　　　}

Background Position

background-positionproperty is used to control the position of the background image.

If notbackground-positionspecified, the image will be placed in the default upper left position of the element, that is(0,0). See the following example:

body {
　　　　background-image: url("tree.jpg");
　　　　background-repeat: no-repeat;
　　　　}

In the following example, the background image is located at the upper right corner, and the position of the image is determined bybackground-positionspecified.

body {
　　　　background-image: url("tree.jpg");
　　　　background-repeat: no-repeat;
　　　　background-position:　100% top;
　　　　}

Background Attribute Shorthand

As can be seen from the above example, many properties need to be considered when handling the background. All these properties can also be specified in one attribute to shorten the code. This is called a shorthand property.

ofbackgroundproperties are used to set all individual background properties (i.e., shorthand propertiesbackground-color,background-image,background-repeat,background-attachmentandbackground-position）in one. For example:

body {
　　　　background-color: #f0e68c;
　　　　background-image: url("smiley.png");
　　　　background-repeat: no-repeat;
　　　　background-attachment: fixed;
　　　　background-position:　250px　25px;
　　　　}

Using shorthand notation, the above example can be written as:

body {background: #f0e68c url("smiley.png") no-repeat fixed　250px　25px;}

UsebackgroundWhen using shorthand properties, the order of the property values should be.

Background:Color Image Repeat Attachment Position ;

If the value of a single background property is missing or not specified when using shorthand notation, the default value of the property (if any) will be used.