Positioning image on another image

Question

I've tried both these posts with no success :

How do I position one image on top of another in HTML? HTML Position image on top of another

My goal is to create a 'product card'. It will have a background image and a product image that should fit to 100% of it's width and 60% of it's height (from top). Something that looks like that - http://up419.siz.co.il/up2/gtarmjyjj55z.jpg

That's my HTML(JSX) :

<div className="product-card">
 <img className="card-background" src={cardBg} />
 <img className="product-image" src={image} />
</div>

That's my CSS :

.card-background{
position: relative;
top: 0;
left: 0;

}

.product-image {
position: absolute;
top: 0;
left: 0;

}

And the weird result - http://up419.siz.co.il/up2/ytmyo2ugwu15.jpg

position absolute positions with the superior positioned parent, you should give that position relative to product-card, if product-card doesnt have a fixed size but should grow with the image, you should not make the image absolute, the .card back ground is the one you want to be absolute, also you want it with bottom:0, not top:0 — cg7, Sep 03 '19 at 14:05
check this code pen if you looking to achieve same design : https://codepen.io/iziz96/pen/KKPXbww — adel, Sep 03 '19 at 14:34

score 0 · Answer 1 · answered Sep 03 '19 at 14:00

0

position:relative sets the origin point for child elements, so you need to set that on the parent element product-card.

answered Sep 03 '19 at 14:00

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 2 · answered Sep 03 '19 at 14:10

Position:Absolute makes things float relative to their POSITIONED parent (you should give position:relative to product-card) also you want to make card-background float not product-image float (keeping product-image from floating helps you if you need your product-card size to adapt to the image size, since floating elements ocupy no space).

Also you want your card-background to float bottom:0 not top:0 (that according to the example you provided)

score 0 · Answer 3 · answered Sep 03 '19 at 14:11

0

https://codepen.io/phong18/pen/yLBzGVO

css

.product-card{
  position: relative;
}
.card-background{
    max-width: 100%;
  position: relative;
  z-index: 1;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

}

html

<div className="product-card">
 <img className="card-background" src={cardBg} />
 <img className="product-image" src={image} />
</div>

answered Sep 03 '19 at 14:11

vnsharetech Phong Nguyen

91
6

detail here https://www.w3schools.com/css/css_positioning.asp – vnsharetech Phong Nguyen Sep 03 '19 at 14:14
I'm getting this result : http://up419.siz.co.il/up3/y2nd4tummgnn.jpg The product image is wider and longer than background image. When I need this result : http://up419.siz.co.il/up2/gtarmjyjj55z.jpg How can I get that? if I put product image width:100% it gives it 100% of the page not the background image – apollo24 Sep 03 '19 at 14:54
set with for .product-card{width: 200px} for example or you can set .product-card{ display: inline-block;} this block will resize base on .card-background – vnsharetech Phong Nguyen Sep 03 '19 at 14:58

Positioning image on another image

3 Answers3