How to insert background image in css style

青灯夜游
Release: 2020-12-18 11:10:56
Original
21236 people have browsed it

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.

How to insert background image in css style

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'));
Copy after login
  • 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;
Copy after login

Explained below:

How to insert background image in css style

Background image example:

    背景图片设置  

Copy after login

How to insert background image in css style

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!