Xiaonei CSS Code add background image Common Code _ Experience Exchange

Source: Internet
Author: User
Tags repetition
Ordinal Chinese description tag syntax remarks
1 background Color {background-color: value}
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: {background-color: Value}
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 background color: style= "background-color:red"

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.
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.