How to use background in css

The background property in CSS is used to set the background of web page elements, including colors, images, gradients and videos. Specific usage includes: setting background color: background-color: #f0f8ff; setting background image: background-image: url("background.jpg"); setting background position: background-position: center top; setting background repeat mode: background- repeat: repeat-x;Set background-attachment: fixed;In addition, bac

Usage of background in CSS

The background attribute in CSS is used to set the background of web page elements. It can specify a variety of background characteristics, including color, image, gradient and video.

Usage syntax:

<code>background: <background-color> <background-image> <background-position> <background-repeat> <background-attachment>;</code>

Parameter details:

• background-color: Set the background color.
• background-image: Set the background image.
• background-position: Specify the position of the background image or gradient.
• background-repeat: Specify how to repeat the background image or gradient.
• background-attachment: Specifies whether the background scrolls with the element.

Specific usage:

1. Set background color:

<code>body {
  background-color: #f0f8ff;
}</code>

2. Set background Picture:

<code>div {
  background-image: url("background.jpg");
}</code>

3. Set background position:

<code>header {
  background-position: center top;
}</code>

4. Set background repeat mode:

<code>footer {
  background-repeat: repeat-x;
}</code>

5. Set background fixed:

<code>#banner {
  background-attachment: fixed;
}</code>

Background gradient:

The background property also supports linear gradients and radial gradients. The syntax is as follows:

Linear gradient:

<code>background: linear-gradient(to right, #000000, #ffffff);</code>

Radial gradient:

<code>background: radial-gradient(circle, #000000, #ffffff);</code>

By flexibly using the background attribute, you can Web elements create rich visual effects.

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