Background z-index

Anyone understands how to use background-z-index properly?

I defined two backgrounds (both position: relative): one with an image and the second with an image background repeat-x.

#one {
position: relative;
background: url(‘images/bg-one.png’) bottom left no-repeat;
background-z-index: +1;
}

#two {
position: relative;
background: url(‘images/bg-two.png’) top left repeat-x;
}

<div id=”one”>
<div id=”two”>
….
</div>
</div>

I tried

z-index: 2 for #one and z-index: 1 for #two

and

background-z-index: 2 for #one and background-z-index: 1 for #two

but

bg-two is still on top of bg-one.

I followed the advice on these two sites to guide me:

https://www.sebastiansulinski.co.uk/tutorials/show_item/46/z_index_background_images_and_hidden_text

https://kilianvalkhof.com/2007/css-xhtml/random-css-thought-background-z-index/