recently encountered background-origin, in learning the CSS3 attribute. There are some questions when using the body element.
background: we know that each element has three rectangles, border box,paddig box,content box. When we set the background-position attribute on an element, the default is actually relative to the upper-left corner of the padding-box. That is, the attribute value in the corresponding css3 is background-origin:padding-box. We can change this property.
problem: there is no problem when I use the given property to set the div. But it doesn"t take effect when I set the body element. May I ask why?
Code
html{
font-size:100px;
}
body,html{
padding:0;
border :0 ;
margin:0;
}
body{
border:0.1rem dashed -sharp333;
padding:0.5rem;
background: url(../images/sy1a.png) no-repeat -sharp68a bottom right;
background-origin: content-box;
/* background-position: right 0.5rem bottom 0.5rem; */
} effect: the ideal should be to display the background image in the checkered area.
