CSS3 background design

 CSS3 has a further improvement compared to CSS2 in the background design of web page elements. It mainly provides the background-size property that can be used to control the size of the background and the background-origin property that can be used to control the background positioning. Although the syntax of this attribute is a little more complicated (mainly because the parameters are more diversified), it can achieve the background effects of web elements that could not be done in the past. For example, the background-size attribute can be set so that the background image will automatically follow the screen zoom Scaling, in traditional web design technology, must be made with Flash, but now it can be done directly through the background design properties of CSS3, and the effect is not bad. Below we will add these two CSS3 background design functions, It is presented for your reference by way of examples.

CSS3 background design example one, background-size property

<style>
#PIC_1{
　width:380px;
　height:100px;
　border:1px #ccc solid;
　margin-bottom:15px;
}
#PIC_2{
　width:380px;
　height:100px;
　background-image:url(background picture);
　background -repeat:no-repeat;
　border:1px #ccc solid;
　background-size:380px 100px;
}
</style>
This is the background image used, the size is 300x80<br>
<div id="PIC_1"><img src ="Background image"></div>
This is the modified background image, the size is 360x100<br>
<div id="PIC_2"></div>

The effect of the example

In example 1, we use the background-size property in the CSS3 background design to modify the original background image of only 300x80 to a size of 360x100, so that the background image can fully match the size of the DIV block, so there will be no retention The white phenomenon appears, and the effect is somewhat similar to traditional HTML image width design.

In-depth study: CSS3 background-size property

CSS3 background design example two, background-origin property

<style>
#TextDiv{
　border:6px #ddd solid;
　width:330px;
　height:100px;
　padding:10px;
　background-image:url(background image);
　background-repeat:no-repeat;
　background-origin:padding-box ;
}
</style>
<div id="TextDiv"></div>

The effect of the example

The second example is to present the background-origin property of CSS3 background design. The main function of this property is to set the positioning of the background image. In the example, I believe you can see that the blue background image is positioned on the border Within the scope, there is no area that is pressed to the border. This is a big improvement in CSS3 background design, because such an effect is very troublesome under the traditional design framework. If you use the CSS3 background design function, you can easily Achieved, of course the designed web page is more detailed.

In-depth study: CSS3 background-origin property