Home > Article > Web Front-end > One trick to fix css relative origin positioning background image
In the previous article, we learned about how to set a background image for an element. Please see "How to set a background image for an element in css". This time we will learn how to use the background-origin attribute to locate the background image of an element. You can refer to it if necessary.
We mentioned the background-origin attribute in the previous article, but the editor did not mention it. Let’s talk about this attribute this time.
Let’s look at a small example.
<style>
div{
background-image: url("images/2.jpg");
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
width: 600px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>The result of this small example is
Let’s take a look at this effect. In order to facilitate observation, I use the size of the element The border line is marked, and the red one is the border line of the div element. Something strange happened. Why is my background image not displayed in the upper left corner, but moved downwards? It turns out that it is because of the use of the background-origin attribute.
Let’s take a look at this property.
background-originSpecifies the background relative area of the origin position of the specified background image background-image attribute. This attribute also specifies the position relative to which the background-position attribute is positioned.
It should be noted that:
If the background-attachment attribute of the background image is "fixed", this attribute has no effect.
Look at the syntax of this attribute.
background-origin: padding-box|border-box|content-box;
Padding-box represents the positioning of the background image relative to the padding box; border-box represents the positioning of the background image relative to the border box; content-box represents the background The image is positioned relative to the content box.
Recommended learning: css video tutorial
The above is the detailed content of One trick to fix css relative origin positioning background image. For more information, please follow other related articles on the PHP Chinese website!