cssimagebackground-position

Background-position not working on an img class

I have an img in a container that is half of the containers height. The img is too big, so I'm using the object-fit property, however it's cutting the img off at the top. I'm using the following CSS and no matter what value I enter in the background-position property it doesn't do anything. 

.testbox img {
    position: relative;
    display: table-cell;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover;

Can anyone see anything wrong with what I'm doing? Any pointers would be really appreciated!

Thanks

Solution

  • The background-position property is only for background images You could use the property object-position for your img.

    https://css-tricks.com/on-object-fit-and-object-position/