How to Set a background image on a webpage

Serial number Chinese description mark syntax remarks
1 Background Color {background-color: Value}
2 background image {background-image: URL (URL) | none}
3. Duplicate background {background-repeat: Inherit | no-repeat | repeat-x | repeat-y}
4. Fixed background {background-Attachment: Fixed | scroll}
5 Background position {background-position: Value | top | bottom | left | right | Center}
6. Back Style {Background: background color | background image | duplicate background | background attachment | background position}

1. Background Color: Background-color

Syntax: {background-color: Value}
Description: The parameter value is the same as the color attribute.
Note: In HTML, there is only one way to add a background color to an object, that is, first create a table, set the background color in the table, and then put the object into the cell. This is more troublesome, not onlyCodeA lot, it also hurts some brains for the size and positioning of the table. Now you can use CSS to easily solve the problem, and the object can be a piece of text or a word or a letter.
Example: Add background color to some text
Background Color: Style = "background-color: Red"

2. Background Image: Background-Image

Syntax: {background-image: URL (URL) | none}
Note: URLs are the path for storing background images. If "NONE" is used to replace the path where the background image is stored, nothing is displayed.
Example: Add a background image to some text. imgbgstyle {background-image: url(logo.gif )}
3. Duplicate Background: Background-repeat

Syntax: {background-repeat: Inherit | no-repeat | repeat-x | repeat-y}
Purpose: repeat the background image to control whether the background image is tiled or not. That is to say, a background image can be displayed somewhere on the webpage with the background positioning control.
Description: parameter value range:
· Inherit inheritance
· No-repeat does not repeatedly tile background images
· Repeat
· Repeat-X to make the image tiled only horizontally
· Repeat-Y: The image is tiled only vertically.
Note: If you do not specify the duplicate attribute of the background image, the default attribute of the browser is that the background image is tiled horizontally and vertically.
4. Fixed Background: Background-Attachment

Syntax: {background-Attachment: Fixed | scroll}
Description: parameter value range
· Fixed: When a webpage is scrolling, the background image is not fixed as the browser's window.
· Scroll: When a webpage is scrolling, the background image is rolled together with the browser window.
Note: The background image is fixed to control whether the background image is scrolled along the webpage. If you do not set the fixed attributes of the background image, the default background image of the browser will scroll along with the page. To prevent the viewer's eyesight from being damaged by a too-fancy background image while scrolling, You can unbind the background image and text content from the browser window.
Example: CSS that keeps the background pattern unchanged from the text
Body {Background: Purple url(bg.jpg); background-repeat: Repeat-y; Background-Attachment: Fixed}
5. Background positioning: Background-Position

Syntax: {background-position: Value | top | bottom | left | right | Center}
function: Background positioning controls the position of a background image displayed on a webpage.
Description: parameter value range
· Number Parameter with length unit
· top: Align relative to the top of the foreground object
· bottom: align the background of a relative foreground object
· left: Align the left of the relative foreground object
· Right: Align the right of the relative foreground object
· center: align relative to the center of the foreground object
· proportional relationship
keyword explanation:
top left = left Top = 0% 0%