Shulou(Shulou.com)06/01 Report--

This article is about how CSS sets background colors and background images. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS background

CSS allows you to use solid colors as backgrounds, as well as to create fairly complex effects using background images.

Background color

You can use the background-color attribute to set the background color for an element. This property accepts any legal color value.

This rule sets the background of the element to gray:

P {background-color: gray;}

If you want the background color to extend slightly outward from the text in the element, just add some inner margins:

P {background-color: gray; padding: 20px;}

You can set the background color for all elements, from body to inline elements such as em and a.

Background-color cannot inherit, and its default value is transparent (transparent).

If an element does not specify a background color, the background is transparent so that the background of its ancestor element is visible.

Background image

To put the image into the background, you need to use the background-image attribute.

The default value of the background-image property is none, which means that no image is placed on the background.

If you need to set a background image, you must set a URL value for this property:

Body {background-image: url (eg_bg_04.gif);}

Most backgrounds apply to body elements, but they are not limited to that.

The following example applies a background to a paragraph, but not to the rest of the document:

P.flower {background-image: url (eg_bg_03.gif); padding: 20px;}

You can even set a background image for an inline element. The following example sets a background image for a link:

A.radio {background-image: url (eg_bg_07.gif); padding: 20px;}

Note: background-image cannot inherit either. In fact, all background properties cannot be inherited.

Body {background-image: url (eg_bg_04.gif);} p.flower {background-image: url (eg_bg_03.gif); padding: 20px;} a.radio {background-image: url (eg_bg_07.gif); padding: 20px;} I am a paragraph. I'm the link.

Note: to clearly display the background images of paragraphs and links, set the inner margins for them.

Background repetition

If you need to tile the background image on the page, you can use the background-repeat property.

The attribute value repeat causes the image to be tiled horizontally and vertically, as is the usual practice for background images in the past.

Repeat-x and repeat-y repeat the image horizontally or vertically, respectively, while no-repeat does not allow tiling.

By default, the background image starts at the upper-left corner of an element. Take a look at the following example:

Body {background-image: url (eg_bg_03.gif); background-repeat: repeat-y;}

Background location

You can use the background-position property to change the position of the image in the background.

The following example centers a background image in the body element:

Body {background-image: url ("eg_bg_03.gif"); background-repeat: no-repeat; background-position: center;}

Note: there are many ways to provide a value for the background-position property.

You can use keywords: top, bottom, left, right, and center, as well as length and percentage values.

Keyword

The image placement keyword is the easiest to understand and works as its name suggests.

For example, top right places the image in the upper-right corner of the inner margin area of the element (typically, these keywords appear in pairs).

Location keywords (no more than two) can appear in any order-one in the horizontal direction and the other in the vertical direction.

If only one keyword appears, the other keyword is considered to be center.

So, if you want an image to appear above the middle of each paragraph, simply declare as follows:

P {background-image: url ("bgimg.gif"); background-repeat: no-repeat; background-position: top;}

Percentage value

The expression of the percentage value is more complicated. Suppose you want to center the image in its element with a percentage value, which is easy:

Body {background-image: url ("eg_bg_03.gif"); background-repeat: no-repeat; background-position: 50% 50%;}

Note: this causes the image to be properly placed, with its center aligned with the center of its element. Percentage values are applied to both elements and images:

The point described as 50% in the image (the center point) is aligned with the point described as 50% in the element (the center point).

If the image is at 0%, the upper-left corner is placed in the upper-left corner of the inner margin area of the element.

If the image position is 100% 100%, the lower right corner of the image is placed in the lower right corner of the right margin.

So, if you want to place an image at 2max 3 horizontally and 1max vertically, you can declare:

Body {background-image: url ("eg_bg_03.gif"); background-repeat: no-repeat; background-position: 66% 33%;}

If only one percentage value is provided, the value provided will be used as a horizontal value, and the vertical value will be assumed to be 50%.

The default value of background-position is 0%, which is functionally equivalent to top left.

This explains why the background image is always tiled from the upper-left corner of the inner margin area of the element, unless you set a different location value.

Length value

The length value explains the offset of the upper-left corner of the inner margin area of the element. The offset point is the upper-left corner of the image.

Body {background-image: url ("eg_bg_03.gif"); background-repeat: no-repeat; background-position: 50px 100px;}

Note: the upper-left corner of the image will be 50 pixels to the right and 100 pixels down in the upper-left corner of the inner margin area of the element.

Tip: unlike the percentage value, the offset is that the upper-left corner of the image is aligned with the specified point in the background-position declaration.

Background correlation

If the document is long, as the document scrolls down, the background image scrolls with it.

When the document scrolls beyond the image, the image disappears.

You can prevent this scrolling through the background-attachment property.

With this property, you can declare that the image is fixed relative to the visual area, so it is not affected by scrolling:

Body {background-image: url (eg_bg_02.gif); background-repeat: no-repeat; background-attachment: fixed}

Note: the default value of the background-attachment property is scroll, and by default, the background scrolls with the document.

CSS background instance

Body {background: # ff0000 url (.. / i/eg_bg_03.gif) no-repeat fixed center;}

Note: this example shows how to use abbreviated properties to set all background properties in one declaration.

CSS background attribute and description

Background: abbreviated property, which sets the background property in a declaration.

Background-attachment: whether the background image is fixed or scrolled along with the rest of the page.

Background-color: sets the background color of the element.

Background-image: set the image as the background.

Background-position: sets the starting position of the background image.

Background-repeat: sets whether and how the background image is repeated.

Thank you for reading! This is the end of the article on "how to set the background color and background image of CSS". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.