前面已经花了两篇的篇幅（《CSS背景：Part1和Part2》）介绍完了除background-size之外的所有background子属性的特性以及使用。众所周之，在Web中对于<img>引入的图片，我们可以显式使用width、height、aspect-ratio或object-fit等属性来调整图片尺寸，但对于背景图片，我们只能使用background-size来进行调整。那么background-size是如何决定背景图片尺寸的计算呢？如果你感兴趣的话，这篇文章可以告诉你很多不为人知的答案。

在第一部分主要和大家一起探讨了 CSS background属性中的background-image、background-repeat、background-attachment等属性。今天接着和大家一起来探讨其另外三个子属性，即 background-position、background-clip 和 background-origin。感兴趣的同学请继续往下阅读！

背景（background）是 CSS 中最常见也是最基础的一个属性，它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background 给一个元素盒子的背景层设置背景颜色（background-color）、背景图像（background-image）。如果是背景图像的话，还可以调整背景图像的位置（background-position）、设置背景图像的平铺方式（background-repeat）以及背景图像在背景层的依附模式（background-attachment）。不过，随着 CSS 技术不断向前发展，CSS 为开发者提供了一些新特性用来控制背景图像，比如背景图像的大小（background-size）、背景图像的剪切（background-clip）、背景图像的定位区域（background-origin）以及给同一个元素盒子设置多个背景。除此之外，CSS 还为 background 的一些老属性新增了功能，比如 background-position可以指定四个值，通过方向设置背景图像的位置，background-repeat 多了几种不同的平铺方式。另外，CSS 还可以使用 background-blend-mode 属性来设置不同的混合模式，从而改变背景图像的效果。

background-repeat是background属性之一，对于前端而言，这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat属性呢？在CSS2.1中，众所周知，background-repeat属性具有四个常见的值repeat、repeat-x、repeat-y和no-repeat。而今天要说不是这四个属性值，在CSS Backgrounds and Borders Module Level 3中，给background-repeat新增加了两个属性值round和space。在接下的中，要讨论的就是新增的这两个属性值怎么使用，他们具有什么特性。

随着现在的大显屏越来越多，实现整个页面的背景相对来说是越来越困难。前段时间在《如何用CSS实现大背景样式》中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的样式方法。但我们有时需要整个页面放一张大的背景图，而且让他适应任显屏的大小。听起来好像蛮复杂的一样，因为我们不知道我们的用户使用多大的显屏，所以我们也不知道我们要制作多大的背景图片才能适合。大家不用担心，今天给大家提供几种另个的大背景图的制作方法，用来帮助大家制作完美的页面背景。

Web页面的大背景制作有时的确烦人，今天看到了web designer wall写了一篇有关于这方面的教程《How to: CSS Large Background 》。从中学习了一下，特意整理一下贴上来与大家分享。