How to set a background image in a CSS Web page

How to set a background image in a CSS Web page

How to set the background image in CSS code, including background image, background repetition, background fixation, background positioning, etc.

Using CSS to set the background image in the Web page, there are several main properties:

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 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 repetition | background attachment | background position}

1. Background color: Background-color

Syntax: {padding: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 background color:

code example: style= "margin-left:0px; padding:0px; Clear:both; line-height:24px; " >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: Adding a background image to some text

code example:. 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

code example: 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

Keyword Explanation:
Top left = left top = 0% 0%

How to set a background picture in a CSS Web page