Background tag Summary in the most complete CSS

Source: Internet
Author: User
Tags scale image
In CSS development we often use background, this article is mainly for everyone to bring a CSS background all summarized. Small series feel very good, and now share to everyone, but also for everyone to do a reference, hope to help everyone.

All background properties cannot be inherited.

1. Background-color

All elements can have a background color set.

The default value for Background-color is transparent; that is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements is visible.

2. Background-image

All elements can set the background image;

Background image can be set multiple, separated by commas, background image will be stacked, written in front of the level above.

3. Background-repeat

Repeat (default)/no-repeat/repeat-x/repeat-y

4. Background-attachment

Scroll (default)/fixed

5. Background-position

Pixel method: Take the upper left corner of the image as the starting point, the first value is the distance to move horizontally, the second value is the distance of the vertical movement; if only one value is specified, the second value defaults to 50%.

Percent method: The percentage is applied to both the image and the element, and the corresponding point coincides with the location. If you specify only a percentage, it means that the vertical direction is 50%.

Keyword method: Top, right, bottom, left, center for the combination of positioning; If you specify only one value, the second value defaults to center.

Note: The background-position can be negative.

By default, the background color extends below the border, and the background image is in the upper-left corner of the padding area.

6. Background-size

Sets the size of the background image; The default value is auto.

Pixel method: The first value sets the width, the second value sets the height, and if there is only one value, the second value is auto.

Percent method: calculated as the base of the parent element's width and height.

Keyword cover, does not change the image aspect ratio, the horizontal and vertical direction is full of the entire element, it is possible to cause some image overflow.

The keyword contain, does not change the image aspect ratio, stretches as far as possible, until One direction fills the entire element, may cause the other party to be not covered.

7. Background-origin

Define the initial position of the background image

Border-box, the upper-left corner of the border.

Padding-box,padding the upper-left corner of the area, default value.

Content-box, the upper-left corner of the content area.

8. Background-clip

The CSS3 Background-clip property specifies the painting area of the background.

The property takes three different values:

Border-box-(default) The background is painted to the outside edge of the border

padding-box-the background is painted to the outside edge of the padding

content-box-the background is painted within the content box

(The explanation in English is more clear)

(English is handled from W3Schools online)

About Background-origin and Background-clip, they are independent of each other and do not interfere with each other.

About the background CSS writing, the individual think should be logical clear, hierarchical, specifically:

Background defines the background image, Background-color defines the background color, Background-clip defines the background display area.

(personal opinion, for reference only)

Full Size Background Image

If we want to has a background image on a website this covers the entire browser window at all times.

The requirements is as follows:

fill the entire page with the image (no white space)

scale image as needed

Center image on page

do not cause scrollbars

The following example shows how-to-do it; Use the HTML element (the HTML element was always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust it size with the Background-size property:

CSS code copy content to clipboard

    1. HTML {

    2. Background:url (img_flower.jpg) no-repeat Center fixed;

    3. Background-size:cover;

    4. }

Small tips:

Use the horizontal tiling of the background image to achieve a wavy border effect.

(At present, only the idea, not yet found the image that meets the needs.) )

Related Article

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.