CSS code add background image Common code

CSS Code add background image Common code

1 background color {font-size:16px; content: ""; Display:block; width:700px; height:0px; margin:20px 0px; " >
2 background picture {Background-image:url (URL) |none}
3 background Repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 background fix {Background-attachment:fixed|scroll}
5 background Positioning {background-position: Value |top|bottom|left|right|center}
6 Figure Style {background: background color | background image | Background repetition | background attachment | background position}
1. Background color: Background-color
syntax: {font-size:16px; content: ""; Display:block; width:700px; height:0px; margin:20px 0px; " > Description: Parameter values and color properties are the same
Note: In HTML, there is only one way to add a background color to an object, which is to first make a table, set the background color in the table, and then put the object in the cell. This is more troublesome, not only the code is more, but also for the size and positioning of the table to hurt some brains. Now with the CSS can be easily done directly, and the scope of the object is very wide, can be a piece of text, it can be just a word or a letter. 
Example: give some text and background color to some text plus background color
table Back color: style= "FONT-SIZE:16PX; content:" "; Display:block; width:700px; height:0px; margin:20px 0px; " >
2. Background Image: Background-image
syntax: {background-image:url (URL) |none}
Description: URL is the storage path of the background image. If "None" is used instead of the background picture's 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}
role: Background image is repeated control is the background image tile or not, that is, the combination of background positioning control can be on the page to display a separate background image
Description: Parameter value range:
inherit inheritance
no-repeat tile background image without repeating
Repeat
repeat-x make the picture tile horizontally only
repeat-y make the picture tile vertically only
Note: If you do not specify a background picture repeat property, the browser defaults to a background picture that is tiled horizontally and vertically in two directions. 
4. Fixed background: background-attachment
syntax: {background-attachment:fixed|scroll}
Description: Parameter value range
fixed: When a Web page scrolls, the background image is fixed as opposed to the browser's window
Scroll: When a Web page scrolls, the background image scrolls together relative to the browser's window
Note: The background picture is fixed to control whether the background picture scrolls with the scrolling of the page. If you do not set the background picture fixed property, the browser default background picture scrolls with the scrolling of the Web page. To avoid overly flashy background images that damage the viewer's eyesight when scrolling, you can unbind the background image and text content, which is bundled with the browser window. 
Example: CSS that makes the background pattern "scroll" without 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}
role: Background positioning is used to control where the background picture appears in the Web page. 
Description: Parameter value range
• Numeric parameters with length units
top: Align relative foreground object top
bottom: Align relative foreground object bottom
Left: left alignment relative to foreground object
Right: Right alignment relative to foreground object
Center: Align relative foreground object center
• Proportional Relationships
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: The center of the parameter is centered horizontally if it is used in front of another parameter, and if it is used after another parameter, it is centered vertically. 
6. Background style: Background
syntax: {background: background color | background image | Background repetition | background attachment | background position}
role: The Background property is a more explicit background-The relation attribute is slightly written. Here are some of the background statements:
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, its initial value is accepted. For example, in the first three rules above, the background position property will be set to 0% 0%. In order to avoid conflicts with the user's style sheets, the background and colors should be specified together. 

CSS code add background image Common code