How to Set a background image on a webpage

Source: Internet
Author: User
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 relative to the center of the foreground object
· proportional relationship
keyword explanation:
top left = left Top = 0% 0%

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.