Can't get object-position to work. What am I doing wrong?-CodePudding

I'm trying to do something very simple: a static background and an centralized image that scrolls over it. It has to be all inline styling, as the place where I wanna put it only accepts the tags a p i strong b u ul ol li h1 h2 h3 img font br span.

My little code is currently like this:

<p style="background:url(https://i.pinimg.com/originals/ba/d4/6a/bad46a1f4e0259ea2ba5319318a74714.jpg); 
width:2000px; 
height:auto; 
left:0px; 
top:0px;  
z-index:-100;

background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;">

<img src="https://i.imgur.com/2QwvWCt.png" style="
width: 700px;
height: auto;
object-position: center top;
z-index:1;"/>

</p>

But the presence or absence of "object-position: center top;" seems to have no effect over the image at all. What am I doing wrong?

CodePudding user response：

object-position refers to the position of the element in relation to its own box, not within a containing parent.

So we have an image that is naturally smaller than its designated size, then the object position comes into play.

For instance, set a 300px image to be 500px wide and object-fit: none; and you get...

img {
  width: 500px;
  display: block;
  height: auto;
  object-position: top center;
  z-index: 1;
  border: 2px solid red;
  object-fit: none;
}

<img src="https://baconmockup.com/300/200" />

The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property.

CodePudding user response：

<p style="background:url(https://i.pinimg.com/originals/ba/d4/6a/bad46a1f4e0259ea2ba5319318a74714.jpg); 

background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
text-align: center;">

<img src="https://i.imgur.com/2QwvWCt.png" style="
width: 700px;
height: auto;"/>

</p>