Common codes for adding background images to Xiaonei.com css code_Experience exchange

Serial number Chinese description mark syntax remarks
1 Background color {background-color: numerical value}
2 Background image {background-image: url(URL)|none}
3 Background repeat {background-repeat:inherit| no-repeat|repeat|repeat-x|repeat-y}
4 Background fixed {background-attachment:fixed|scroll}
5 Background positioning {background-position:value|top|bottom|left|right| center}
6 Back style {background: background color | background image | background repeat | background attachment | background position}

1. Background color: background-color

Syntax: {background-color:numeric}
Explanation: The parameter value is the same as the color attribute
Note: In HTML, a background must be added to an object There is only one way to change the color, and that is to make a table first, set the background color in the table, and then put the object into the cell. This is more troublesome. Not only does it require a lot of code, but it also takes some trouble with the size and positioning of the table. Now it's easy to do it directly with CSS, and the object range is very wide, it can be a piece of text, or just a word or a letter.
Example: Add a background color to some textAdd a background color to some text
Table back color: style="background-color:red"

2. Background image: background-image

Syntax: {background-image: url(URL)|none}
Explanation: URL is the storage path of the background image. If "none" is used instead of the background image storage path, nothing will be displayed.
Example: Add a background image to some text .imgbgstyle { background-image: url(logo.gif)}
3. Background repetition: background-repeat

Syntax: {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
Function: Background image repetition controls background image tiling Or not, that is to say, combined with the control of background positioning, a background image can be displayed separately somewhere on the web page
Note: Parameter value range:
·inherit inheritance
·no-repeat not repeated Tile the background image
·repeat
·repeat-x makes the image tile only in the horizontal direction
·repeat-y makes the image tile only in the vertical direction
Note: If you do not specify a background For the image repeating attribute, the browser default is for the background image to be tiled in both horizontal and vertical directions.
4． Background fixed: background-attachment

Syntax: {background-attachment:fixed|scroll}
Description: Parameter value range
·fixed: When the web page is scrolled, the background image is relative to the browser window Generally speaking, fixed
·scroll: When the web page is scrolled, the background image scrolls together relative to the browser window
Note: The background image fixed controls whether the background image scrolls with the scrolling of the web page. If you do not set the background image fixed attribute, the browser's default background image will scroll with the scrolling of the web page. In order to prevent overly fancy background images from damaging the viewer's eyesight when scrolling, you can unbundle the background image and text content, which should be bundled with the browser window.
Example: CSS that prevents the background pattern from "scrolling" with the text
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5. Background positioning: background-position

Syntax: {background-position:numeric|top|bottom|left|right|center}
Function: Background positioning is used to control the position of the background image displayed on the web page.
Description: Parameter value range
·Numeric parameter with length unit
·top: top alignment relative to the foreground object
·bottom: bottom alignment relative to the foreground object
·left: relative to the foreground object Left alignment
·right: Right alignment relative to the foreground object
·center: Center alignment relative to the foreground object
·Proportion relationship
The keywords are explained 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 = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100%
Note: If the center in the parameter is used in front of another parameter, it means horizontal centering; if it is used after another parameter, it means vertical centering.
6. Background style: background

Syntax: {background:background color|background image|background repeat|background attachment|background position}
Function: The background attribute is a clearer background— Shorthand for relationship attributes. 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 When specified, its initial value will be accepted. For example, in the first three rules above, the background position property would be set to 0% 0%. To avoid conflicts with the user's style sheet, the background and color should be specified together.