The background is indispensable in front-end design. Next, we will briefly introduce the relevant styles of the background.
This time, we will use the div tag to explain.
1. Background color: background-color
This property is used to set the background color. Then the representation of color has been mentioned in the previous article in three ways: English (red, blue...), RGB value, hexadecimal value (#ffffff). The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background color</title>
<style>
.container{
width:200px;
height:200px;
border:2px solid red;
background-color:pink;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
The effect is as follows:
2. Background image: background-image
Image backgrounds are often used in normal use. It must be noted that if you want to set a background image to the div, you must set the div
Width Height. If no width is set then the width of the div will be the width of the div's parent; if no height is set then nothing will be displayed.
It should also be noted that if the width and height of the picture exceeds the width and height of the div, the div will not be stretched, and the final display effect will be that only part of the picture is displayed.
When the background image is referenced, the url value is divided into absolute address and relative address. Because the absolute address may not find the resource after disk replacement, host replacement, etc., it is recommended to use relative address.
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image</title>
<style>
.container{
width:500px;
height:500px;
border:2px solid red;
background-image: url(img/haizeiwang_little.jpg);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
The effect is as follows:
we can clearly see that the background image is repeated countless times until it covers the entire div. What if we don't want the background image to repeat?
Then you need to use the background-repeat attribute we will talk about below.
3. Background repetition: background-repeat
This property represents the repetition effect of the background image. By default, if the width and height of the image cannot cover the entire div, it will be repeated horizontally (X axis) and vertically (Y axis).
background-repeat property value:
repeat: Repeat (default).
no-repeat: Do not repeat, only display the original size of the picture.
repeat-x: horizontal tiling (x-axis tiling)
repeat-y: vertical tiling (Y-axis tiling)
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image tile</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
The running effect is shown in the following figure:
4. Background image positioning: background-position
This property is used to define the display position of the background image in the div, which is divided into horizontal position and vertical position.
The horizontal position is divided into: left (left), middle (center), right (right), numerical value
The vertical position is divided into: top (top), middle (center), bottom (bottom), numerical value
When the background-position attribute is not written, the default display position of the image is: left top
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image positioning--default position</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
The display effect is as follows:
We can specify a location to display the image at a specific location:
As shown in the middle position on the right, the code and effect are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image positioning--right middle position</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
If the location is center, then center can be omitted. For example: the lower right position is (right center), it can also be written as (right)
For example: if you want the picture to be displayed in the middle and lower position, the code and effect are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image positioning--middle and lower position</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:bottom;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
We can also use numerical values to determine the position of the image more freely.
For example, let the picture be 20px from the left in the horizontal direction and centered in the vertical direction. The code and effect are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image positioning--custom position</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:20px center;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
5. Background image scrolling: background-attachment
There are two property values of background-attachment: fixed, scroll
fixed: It can be understood that the image is fixed to a certain position in the browser, it will not scroll with the browser.
scroll: will scroll with the browser.
The sample code and effects are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background image scrolling</title>
<style>
#bgDiv {
width:700px;
height:700px;
border:2px solid blue;
background:url(img/haizeiwang_little.jpg) no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
In the above image, you can see that the browser has scrolled down. Since the background-attachment is set to fixed for the background image, the image is still displayed in the upper left corner.
6. Background style merge: background
Whether it is the background color or the background image, or the definition, tiling, etc. of the background, these are all related styles of the background.
Then you can use background to set the relevant styles of the background uniformly. The code and effect are shown in the following figure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background style</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid #C71585;
background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
The order of attributes in the merged style (background) can be adjusted at will, and there is no fixed order; the same attributes can be written or not.
Note: If you use a merged style (background), it is best not to use a separate sub-style, because there will be an overwrite.
The code and effect are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background style</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid #C71585;
background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
background-color:blue;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
In this example, the merged style background already defines the background color as red (red), but later defines the background-color as blue (blue) separately,
Since background-color is defined after background, the background color will be replaced from red to blue.
ok, the background-related styles are introduced, do you understand?