How to styling picture in div? - css

Question

So i making shop and i want to styling the image.
Right now i don't see the faces in the div:
I know it's little thing,but i can't make this happen:
Menu-item component:
import React from "react";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size }) => (
<div className={`${size} menu-item`}>
<div
className="img"
style={{
backgroundImage: `url(${imageUrl})`
}}
/>
<div className="content">
<h1 className="title">{title}</h1>
</div>
</div>
);
export default MenuItem;
Menu-item styling:
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 10px;
border-radius: 10px;
.img {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
right: 0px;
border-radius: 10px;
}
&:hover {
.title {
transition: ease-in 0.6s;
opacity: 1;
cursor: pointer;
}
}
&.small-sneakers {
background-position: center;
}
&.large {
height: 420px;
}
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: white;
text-transform: uppercase;
align-items: center;
opacity: 0;
z-index: 3;
position: absolute;
}
}
When i try to do background-position: top -50px center,then the image not responsive :/
Thanks for the help!

Answer 1

When you are using background-position: top -50px center you will break the intention of background-size: cover; because it (cover) will determine whether to "crop" the image horizontally or vertically based on the size of the image, so if the cropping is happening on the sides, 50px of the top of the image will be outside of its container.
You can manipulate the wanted behavour by setting overflow:hidden on the parent, set a negative margin to the top of the child, and setting the height of the child to 100% + [margin-top value] using calc.
example code on code pen here
.menu-item
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 10px;
border-radius: 10px;
overflow: hidden;
}
.img {
margin-top: -50px;
width: 100%;
height: calc(100% + 50px);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-image: url(https://image.cnbcfm.com/api/v1/image/106069136-1565284193572gettyimages-1142580869.jpeg?v=1576531407&w=1400&h=950);
}