How to insert background image in css style

In CSS, you can use the background-image or background attribute to insert a background image. The basic syntax format is "background-image/background:url('URL')". The parameter URL is used to specify the background image. path.

The operating environment of this tutorial: Windows 7 system, HTML5 CSS3 version, this method is suitable for all brands of computers.

Recommended: "css video tutorial"

In css, you can use the background-image or background attribute to insert a background image.

background-image property

The background-image property sets the background image of an element. The background of an element is the total size of the element, including padding and borders (but not margins).

Syntax:

background-image:url('URL'));

• url('URL') Image URL

By default, background-image is placed in the upper left corner of the element, and repeat vertically and horizontally.

Tip: Please set an available background color so that if the background image is not available, the background ribbon can be used instead.

background attribute

The background attribute is a property that specifically sets the background. You can set the background color or background image.

The background attribute is a shorthand attribute that can set all background attributes in one statement.

The properties that can be set are:

• background-color: Specifies the background color to be used.

• background-position: Specifies the position of the background image.

• background-size: Specifies the size of the background image.

• background-repeat: Specifies how to repeat the background image.

• background-origin: Specifies the positioning area of the background image.

• background-clip: Specifies the drawing area of the background.

• background-attachment: Specifies whether the background image is fixed or scrolls with the rest of the page.

• background-image: Specifies the background image to use.

Example:

background:url(bgimg.gif) no-repeat 5px 5px;

Explained below:

Background image example:

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of How to insert background image in css style. For more information, please follow other related articles on the PHP Chinese website!