How to Use CSS background

Css background is used to set the background color of html Tag elements and other background attributes of background images. This article describes how to use CSS background and basic examples of CSS background. For more information about the coders, see. I. Css background syntax

Basic CSS background knowledge

CSS background this refers to setting background attributes for objects through CSS, for example, setting various background styles through CSS.

Background Syntax:

background: background-color || background-image || background-repeat || background-attachment || background-position

Background words in CSS:

Background CSS manual query-background
Background-color: Set the color as the background color of the object.
Background-image: Set the image as the background image
Background-repeat
The background-attachment setting or retrieval of the background image is fixed as the object content is rolled.
Set or retrieve the background image position of an object.

The value of the Background style is a combination of compound attribute values, that is, the value of the Background word can be connected to multiple attribute values. You can use a space interval link between the value and the value.
For example:

Background: #000 url (image address) no-repeat left top

Css background:

1. Set a solid color background. You can set the background color of the solid color of the object in the background,
2. Set the image as the background. You can set the background of an object as an image. If the background is an image, the image can be tiled repeatedly or fixed as the background of the object at any position of the object.

Set webpage background Style

Comparison between Html original background and CSS background
Html indicates the background settings of the corresponding table.

Html background word:

BgcolorSet the background color to the background color of CSS.
BackgroundSet the image as the background and background-image corresponding to the CSS background image

Ii. Background Color

background-color:#FFF

Set the object background to pure white

If you want to set the background color for the table, you can use bgcolor = "color value" to set the background color of the object.
For the CSS background color, you can use background-color: color value; or background: color value to set the background color of the object.

Iii. CSS image background

CSS can use background or background-image to directly reference the image address to set the image as the object background.

background:url(http://www.manongjc.com/logo.gif);

Set the LOGO image as the background

Or

background-image:url(http://www.manongjc.com/logo.gif);

With the same effect. In this way, there is a defect in setting the image as the background, that is, the image will be up, down, left, right, and right.

Background-attachment usage parsing:

Background-attachment: fixed; fixed background

Background-attachment: scroll; css background images scroll with the object content

Image background Syntax:

background-image :url (url)

Background-image: url (http://www.manongjc.com/logo.gif)

Set object background to image http://www.manongjc.com/logo.gif

If the image is required to be tiled repeatedly when it is used as the background, background-position and background-repeat must be used together.

p{background-image :url (http://www.manongjc.com/logo.gif);background-repeat : no-repeat;background-position : 5px 6px } 

The object p is defined here, and the background image is watermark

4. Center the background

The CSS background is divided into left-right and upper-right center.

The background image is centered up and down. You can calculate the up and down height and divide the settings equally. For example, if the distance between the up and down height is PX, you can set the number of pixels on the top of the image so that the image can be centered up and down.

5. Simplified compound background Style

We need to consider the code optimization and simplicity when using it. here we can optimize the shorthand code

1. If only the background is set to a single color

background-color:#FFF

Abbreviated

background:#FFF

2. Set the image as the Background Abbreviation

background-image :url (http://www.manongjc.com/logo.gif);background-repeat : no-repeat;background-position : 5px 6px 

We can Abbreviation:

background:url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px 

Vi. Summary of CSS background

Images are often used as the background in a Web page layout. I hope you can learn more about them. Generally, set the object image as the background property instance background: #666 url (image address) no-repeat center top; (Description: first, set the background color to keep up with the image. Then, set the background color to keep up with the image. Then, set the background color to keep up with the image. The preceding background color can be unnecessary and not required. Generally, the image is used as the object background. If you want to set whether the image is displayed repeatedly, the image position will be set)

1. Set the image as the background. If the image is set to be repeated in the X-ray direction, it will be invalid if the image is set to the left or right of the object, you can set the display to start at the top or bottom of the object.

2. Set the image as the background. If the image is set to be repeated in the Y direction, the setting will be invalid if the image is set to the top or bottom of the object, you can set the image to be displayed on the left or right of the object.

3. If you set the background to be completely displayed again, set the image to be displayed wirelessly at the top, bottom, left, and right of the object.

During webpage layout, we often set color and background images for the webpage background to achieve the desired aesthetic effect. In practice, we make css background backgrounds as simple as possible, and pay attention to the correct path when introducing images, to locate the background of an object.

Compound attribute expression of the classic Background:

.manongjc{background:#FFF url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px} 

Set the background color, background image Introduction, background image positioning, and whether the image is the same as the background style.

Related reading:

CSS tutorial

CSS3 tutorial

CSS Reference Manual