Original is not easy, I hope you can pay attention to us, and then easily point a praise ~~

This post was first published on the Front End team blog: CSS Background that you may not know much about

preface

Background, if you’ve ever written CSS, you probably know what this property does, just as the name implies. It is defined as follows in MDN:

Background is a CSS shorthand property that defines all Background properties at once, including color, image, origin, size, repeat, and so on.

Background syntax:

  • BackgroundYou can use abbreviations or set one of the items separately:
    • Shorthand syntax
      • The order of official recommendation is: background: background-color, background-image, background-repeat, background-attachment, background-position;
      • Writing order is not mandatory
    • Separate styles
value instructions The default value version
background-color Specifies the background color to use transparent This writing
background-position Specifies the position of the background image 0%, 0%, This writing
background-image Specifies one or more background images to use none This writing
background-repeat Specify how to repeat the background image repeat This writing
background-attachment Sets whether the background image is fixed or scrolls along the rest of the page. scroll This writing
background-size Specifies the size of the background image auto CSS3
background-origin Specifies the location region of the background image padding-box CSS3
background-clip Specifies the drawing area of the background image border-box CSS3

Background base paper

Here are some common background attributes:

<style>
    .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        background-image: url('img1');
        background-size: 50%;
        background-repeat: no-repeat;
    }
</style>
<body>
    <div class="div1"></div>
</body>
Copy the code

  • background-colorThe background color
    • Property values can be set to:

(1) words: background-color: black;

(2) hex: background-color: #000;

(3) RGB color: RGB (0, 0, 0);

  • background-imageThe background image
    • background-image: url('')
    • You can also set up multiple images at the same time. See the advanced section – Multi-background Images
  • background-sizeBackground image size
    • Common attribute values are:

(1) Percentage: BACKground-size: 100%;

(2) Pixel value: background-size: 100px;

  • When only one value is set, the default is width, and the height is scaled.
  • background-repeatBackground image repetition
    • Common attribute values are:

(1) background-repeat: repeat;

(2) repeat x: background-repeat: repeat x;

(3) repeat: background-repeat: repeat-y;

(4) no-repeat: background-repeat: no-repeat;

Background in order

Multi-background image background-image

In CSS2.1, only one background image can be added to an element. In CSS3, however, we can add multiple background images to elements. Its compatibility is shown below:

  • Multiple background images can be given a separate style for each image, separated by commas
  <style>
      .div1 {
          width: 100px;
          height: 100px;
  
          background-color: black;
          background-image: url('img1'), url('img2');
          background-size: 50%.100%;
          background-repeat: repeat-x, no-repeat;
      }
  </style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

  • What if the number of attribute values is not equal to the number of images?
  <style>
      .div1 {
          width: 100px;
          height: 100px;

          background-color: black;
          background-image: url('img1'), url('img2'), url('img3');
          background-size: 50%.30%;
          background-repeat: repeat-y, no-repeat;
      }
  </style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

Summary of multi-background images:

  • The style applied to the background image is the value of the property corresponding to the image position;
  • If the attribute value is less than the number of background images, the image style with no corresponding value takes the first value.
  • The background image is hierarchically reduced from left to right. Of course, the lowest level isbackground-color;

Background gradient background-image: Linear-gradient

The background gradient is set based on background-image. For details, see MDN. Its compatibility is shown below:

  • background-image: linear-gradientPath gradient (direction can be set manually, default from bottom to top)
  • The usage of Linear-gradient () is as follows: (see MDN for details)

linear-gradient( < angle > | to < side-or-corner > ,]? < color-stop > [, < color-stop >]+ )

< Angle > : Specifies the direction of the gradient with the Angle value

< side – or – corne r > : [left | right] | | [top] | bottom

“Color – stop > : < color > / < percentage > | < length >]?

  • Example: background: Linear gradient(to left, #333, #333 50%, # eEE 75%, #333 75%);
  <style>.div1 { background-image: linear-gradient(#71c9ce, #e3fdfd);; }</style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

  • background-image: radial-gradientRadial gradient
  • The use of radial-gradient is as follows :(see MDN for details)

radial-gradient( [ [ellipse | circle] || [ < extent-keyword > | < precentage > ] [ at < position > ]? ] ? < color-stop > [ , < color-stop > ]+ )

< extent-keyword > = closest-corner | closest-side | farthest-corner | farthest-side

“Color – stop > : < color > / < percentage > | < length >]?

  • Example: background – the image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
  <style>.div1 { background-image: radial-gradient( #71c9ce, #e3fdfd);; }</style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

  • background-image: repeating-linear-gradientRepeated path gradient
  <style>
      .div1 {
          background-image: repeating-linear-gradient(45deg, #71c9ce 20px, #a6e3e9 30px, #e3fdfd 40px);
      }
  </style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

  • background-image: repeating-radial-gradientRepeated radial gradient
  <style>
      .div1 {
          width: 100px;
          height: 100px;
  
          background-color: black;
          background-image: repeating-radial-gradient(circle, #90ade4 ,#3350ba 20%);
      }
  </style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

Background position background-position

Before we talk about the following content, let’s introduce the three boxes involved in an element, please see the picture ↓

The three boxes above are content-box, padding-box and border-box.

  • border-boxOf the element being setborderThe area occupied is located atpadding 和 contentThe outer layer of
  • padding-boxOf the element being setpaddingThe area occupied is located atborderThe inner layer,contentThe outer layer of
  • content-boxElements of thepaddingThe region is bounded by thetacontent

Background-position defaults to the top left corner of the padding-box box.

  • Its property value can be set to

(1) Percentage (%)

(2) Pixels

(3) the position (top | | | right bottom left | center)

  • When only one value is set, the other value defaults tocenterOr 50%.
  • padding-boxThe upper-left coordinates of the box are (0, 0)/(left, top), and the lower-right coordinates are (100, 100)/(right, bottom).
  • demo
  <style>
      .div1 {
          width: 100px;
          height: 100px;
  
          background-image: url('img1');
          background-size: 50%;
          background-repeat: no-repeat;
          background-position: right;
      }
  </style>
  <body>
      <div class="div1"></div>
  </body>
Copy the code

Background repeats background-repeat

Background-repeat in addition to several common repeat, repeat-x, repeat-y and no-repeat, background-repeat also adds two new values in CSS3: space and round. Its compatibility is shown below:

  • The background image is smaller than the container

    • Background-repeat :space Repeat the image as much as possible without scaling, and divide the gap between the image equally

    • Background-repeat :round Stretch the image to fill the container with as many images as possible

  • The background image is larger than the container

    • background-repeat:spaceCrop the image without scaling, keeping only the parts inside the container

    • background-repeat:roundScale down the image to fill the container with the same length and width as the container size (not scaled to scale, the image is very likely to distort)

Background relative position background-origin

The background-origin property specifies the position relative to which the background-position property is positioned. Attribute values include content-box, padding-box, and border-box. The default value is padding-box. The compatibility is as follows:

  • Background-origin: content-box

  • background-origin: padding-box

  • background-origin: border-box

Draw the background region background-clip

The background-clip property specifies the region to draw the background. The default value is border-box, which has the same property value as background-origin, but behaves quite differently. The compatibility is as follows:

  • background-clip: content-box

  • background-clip: padding-box

  • background-clip: border-box`

​

Background size background-size

This property feels very common, but it is also a new property in CSS3. In CSS2.1, the background image size cannot be set. Background-size contains two special attributes: contain and cover in addition to the usual setting size and percentage

  • Background-size: contain an image that is scaled down until the longer part of the image completely fits the content area. Used when the background image is larger than the elements.

  • Background-size: When the length and width of a cover image are different, the image is enlarged proportionally until the shorter side fully fits the content area, so that the background image completely covers the background area, which is mostly used when the background image is smaller than the element.

Background fixed background-attachment

Sometimes, on some websites, you’ll see that when you scroll, the background image is fixed. That’s what background-attachment: fixed does.

  • background-attachment: fixedBackground fixed

  • background-attachment: scrollBackground scrolls with page scrolling (default)

Extended property Background: Element

A special extension property that sets one element to the background of another element. Surprise, surprise, surprise! However, this property is only available for FireFox 4+ and requires a browser prefix.

  • background: element(#id)
    • When the background of Demo1 is a non-picture element, the background style is the same as the original element
  <style>
  	.div {
        width: 200px;
        height: 200px;
        background: element(#button)  no-repeat;
        background: -moz-element(#button)  no-repeat;
    }
    #button {
        width: 150px;
        height: 20px;
        margin: 50px;
        color: #0470f4;
    }
  </style>
  
  <body>
    <div class="div1">
        <button id='button'>This is a button</button>
    </div>
  </body>

Copy the code

  • Demo2 When the background element is a picture, the background image will not change with the size and style of the original image, but tile and other background styles are still supported
  <style>
  	.div {
        width: 200px;
        height: 200px;
        border: 10px dashed #0ff;
        background: element(#img1);
        background: -moz-element(#img1);
    }
    #img1 {
        width: 50px;
    }  
  </style>
  
  <body>
    <div class="div1">
        <img id='img1' src='img1' />
    </div>
  </body>

Copy the code

conclusion

There are a lot of things we don’t know about CSS, and we’re exploring them a little bit. Look forward to working with you. If you find something new, please feel free to discuss it with us

Refer to the article

  • CSS3 Wallpapers
  • CSS3 background extension element
  • CSS3 summary 2 :(background) background/gradient function

, recruiting

ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 50 front-end partners, with an average age of 27, and nearly 30% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and netease, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.

If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]

Recommended reading

Probably the most complete collection of text overflow truncation ellipsis schemes

CSS Stacking Context

An illustrated guide to unlock the mysteries of single sign-on