CODEWITHSUNDEEP
htmlcss
Chaudhry Talha
Chaudhry Talha

Reputation: 7878

How to move the image in a div a little to the bottom

Okay so I'm a very beginner on CSS and I don't know if the title of this question goes as what I want to know. I've this on the website that I'm making: enter image description here
This square box contains the featured image of a product. Now the image is a rectangle and I want to show it in a square. It's okay if the dress cuts off but the face of the girl needs to be shown.
So my question is there any way I can move this image center point to top-left? Please feel free to ask me if I've not made the point clear of you need additional information.
This is the name of the div this image is placed in:

.attachment-post-thumbnail
{
 /*what to write here*/   
}

Based on the comments here is the code of this section:enter image description hereenter image description here

Upvotes: 0

Views: 98

Answers (1)

Johannes
Johannes

Reputation: 67776

I suppose the image is defined as a background-image for its container .attachment-post-thumbnail.

Most likely the background-image's size is set to cover at the moment, and the position to "center center" (i.e. horizontally and vertically).

So you can still use background-size: cover, but add background-position: center top; to your .attachment-post-thumbnail rule, which should align the top of the image to the top of its container. If that doesn't work, you can try to add !important (i.e. .attachment-post-thumbnail { background-position: center top !important; }) to enforce it.

Upvotes: 2

Related Questions