Need help with a background img?

How would I get the background pattern in the card to be behind avatar. I tried using position absolute but when i add a z-index of -1 and add background color to the card it covers the pattern then if I use background image its going to cover the whole card. I woud appreciate ur guys advice and ur approach.
No description
4 Replies
JJ
JJ2mo ago
thats the original not mine
Chris Bolson
Chris Bolson2mo ago
As usual there are many ways to achieve this. One method would be to set isolation: isolate on the card. This will create a new stacking context, so, when you apply z-index: -1 to the background pattern element, it won't go behind the card, just behind it's contents.
capt_uhu
capt_uhu2mo ago
would really need to see some code to do anything other than guess here. But personally I feel like if you're using extra elements and position: absolute; for this you are likely over complicating this.
ChooKing
ChooKing2mo ago
https://codepen.io/chooking/pen/poBpowW Since that background is only a texture, it can be used as an actual background image. Specify a background size and position, and disable repeat.