Add common background image codes to css code on the Intranet _ experience exchange

Source: Internet
Author: User
If you are interested in personalized internal network webpages, you can use them. If you are interested, you can refer to some attribute numbers set in the background of the webpage.
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 only the code is too large, but also the size and positioning of the table hurt some brains. 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}
Purpose: Background positioning controls the position of a background image displayed on a webpage.
Description: parameter value range
· Number parameters with length units
· Top: Align to the top of the foreground object
· Bottom: Align to the bottom of the foreground object
· Left: left alignment relative to foreground object
· Right: right-aligned relative to foreground object
· Center: align with the center of the foreground object
· Proportional Relationship
Keyword explanation:
Top left = left top = 0% 0%
Top = top center = centers 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% 50%
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}
Purpose: The background attribute is a clearer background-a brief description of the link attribute. The following are some 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, 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.

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.