CSS background is a very interesting thing, can be set
Background color: Background-color
Background Image: Backgoround-image
Background map shows relative position: background-position, positive image moves down, negative image moves to the left
example of background image : (height of each image 50px, blank Space 50px)
Example:
1. Background color:
CSS file code
. c1{ width:100%; height:50px; Background-color: #425a66;}
HTML code, like all of the following, is no longer written.
<body> <div class= "C1" ></div></body>
2. Background map (not duplicated)
CSS Code
. c1{ width:100%; height:500px; Background-color: #425a66; Background-image:url (quantu.png); Background-repeat:no-repeat;
3. Background map (repeat)
CSS Code
. c1{ width:100%; height:500px; Background-color: #425a66; Background-image:url (quantu.png);}
4. Display the relative position of the background map
CSS code (0: The picture does not move on the x-axis, 300 picture moves up the 300px on the y-axis, just shows the 4th picture)
Because of our
height:50px; The same height as the picture
So it just shows a small picture.
. c1{ width:100%; height:50px; Background-color: #425a66; Background-image:url (quantu.png); Background-repeat:no-repeat; Background-position:0 -300px;}
CSS's Background property