Common codes for adding background images to CSS codes in the Intranet

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 to the center of the foreground object
· proportional relationship
the keywords are as follows:
top left = left Top = 0% 0%
Top = top center = center Top = 50% 0%
right top = Top right = 100% 0%
left = left center = center left = 0% 50%
center = 50% 50%
right = right center = center right = 100% 5 0%
bottom left = Left Bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = Right Bottom = 100% 100%
note: if the center parameter is used before another parameter, it indicates horizontal center; if it is used after another parameter, it indicates vertical center.
6. Background style: Background

Syntax: {Background: background color | background image | duplicate background | background attachment | background position}
function: the background attribute is a clearer background-a brief description of the link attribute. Here are some background declarations:
example:
body {Background: white URL (http://www.htmlhelp.com/foo.gif)}
BLOCKQUOTE {Background: #7fffd4}
P {Background: URL (.. /backgrounds/pawn.png) # f0f8ff fixed}
table {Background: #0c0 url(leaves.jpg) No-repeat bottom right}
Note: When a value is not specified, the initial value is accepted. For example, in the first three rules, the background position attribute is set to 0% 0%. In order to avoid conflicts with your style sheet, the background and color should be specified together.