CODEWITHSUNDEEP
javascripthtmlcssstyles
mikasa
mikasa

Reputation: 900

CSS - Image gets hidden in the overflowed area

I have created a segment from a circle but when I try to apply a background image to it, it applies it to the whole circle resulting in the image getting centered somewhere below what the user can't see.

enter image description here

Right now, only the portion of the circle that overlaps with the rectangle gets displayed thanks to overflow: hidden, I have just disabled the hidden for now to show how the image is actually getting rendered.

Can someone please tell me how I can apply a background image only to the portion of the circle that's visible?

This is the result I want: enter image description here

Demo: https://codesandbox.io/s/segment-background-image-msu63

^ I achieved this by hardcoding the position of the image but I am looking for a CSS oriented approach because that'll be much more dynamic.

EDIT: so I was able to figure it out. The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!

p.s the demo is updated with the solution.

Upvotes: 2

Views: 126

Answers (2)

mikasa
mikasa

Reputation: 900

The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!

p.s the demo is updated with the solution.

Upvotes: 1

Dimitar Spassov
Dimitar Spassov

Reputation: 2733

You can adjust the background-position top top center:

background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);

Upvotes: 0

Related Questions