Background image related applications - full, adaptive

1. First, let's understand the background related properties

background-color： Color .

background-position： Location .

The number , perhaps top,right,bottom,left etc. ,center： Positioning from the left side of the page ,0px： Distance from the positioning above the page

background-size： Size .

auto：

The default value is , Keep the original height and width of the background image .

contain：

Zoom to the largest possible size （ But its width and height must fit the content area ）. After the width is as high as the parent , You won't zoom , When the width or height is equal to the size of the box , The picture is no longer zoomed .

such , It depends on the proportion of the background image and the background positioning area , There may be some background areas that are not covered by the background image .

cover：

Zoom background image , So that the content area is completely covered by the background image （ Its width and height are equal to or exceed the content area ）. The picture completely covers the whole box , It may cause incomplete picture display

such , Some parts of the background image may not be visible in the background positioning area .

Specific value ：

Set two values , Set a value （ When only one value is taken , The second value is equivalent to auto（ Same as the first value , Instead of keeping the original length of the background image ））

Percentage value ：

Stretch the background image , The size of the percentage relative to the width and height of the parent element

background-repeat ： How to repeat the background image .

background-origin ： Positioning area .

border-box - The background picture starts at the top left corner of the border

padding-box - The background image starts at the upper left corner of the inner margin edge （ Default ）

content-box - The background picture starts from the upper left corner of the content

background-clip： painting , Draw area .

border-box - The background is drawn to the outer edge of the border （ Default ）

padding-box - The background is drawn to the outer edge of the inner margin

content-box - Draw the background in the content box

background-attachment： Roll or fix （ Does not scroll with the rest of the page ）

scroll： Scroll as the page scrolls （ Default ）

fixed： Don't scroll as the page scrolls

local： Scroll as the content of the element scrolls

initial： The default value of this attribute （ The original style ）

       Internet Explorer or Opera 15 And previous versions do not support initial Keyword as an attribute value .

inherit： Specifies that the settings inherit from the parent element

background-image ： background image .

background-image:url( picture )

background Abbreviation ：

background：-color    -position   -size   -repeat   -origin   -clip   -attachment   -image

The width and height of the block level container are dynamic , Can be long or short , Then the background image can be automatically expanded , Fill the entire container .

2.Body Add a background picture to

The background picture is very large , Very long

html {
  /*1. html The default is different from the browser height  */
  height: 100%;
}
body {
  /*  such body Write 100% To take effect  */
  height: 100%;
  /*  The background image is centered  */
  background: url('./bg.jpg') no-repeat center 0;
  /*  Zoom background image  */
  background-size: cover;
}

The background image is relatively small

   html {
      /*1. html The default is different from the browser height  */
      height: 100%;
    }

    body {
      height: 100%;
      background-image: url(./bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;

      background-attachment: fixed;

    }

reference ：

CSS3 background | Novice tutorial

CSS Multiple backgrounds