Home  >  Article  >  Web Front-end  >  How to set background image in css

How to set background image in css

青灯夜游
青灯夜游Original
2021-11-09 14:17:2872606browse

How to set the background image in css: 1. Use the background-image attribute, the syntax "background-image:url(picture url);"; 2. Use the background attribute, the syntax "background:url(picture url) url);".

How to set background image in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can set the background image through the background-image attribute or background attribute.

The background-image attribute is used to set 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). By default, the background-image is placed in the upper left corner of the element and repeats both vertically and horizontally.



	
		
	

	
		

How to set background image in css

The background attribute is a shorthand attribute that can set all background attributes in one statement, including:

  • background -color specifies the background color to use

  • 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 image

  • background-attachment Sets whether the background image is fixed or scrolls with the rest of the page

  • background-image specifies one or more background images to use

Example:

div {
	width: 450px;
	height: 360px;
	background: url(img/2.jpg);
	background-size: 450px;/*设置图片大小*/
}

How to set background image in css

(Learning video sharing:css video tutorial)

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

Statement:
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