Ghostrider
New Member
In CSS, I'm trying to figure out how to individually control the size of 2 background images, stacked on top of each other. So in CSS, one could define 1 background image as such: \[code\]background:url('base.png') no-repeat center;\[/code\]. In order to stack an overlay on top of a base image, you could use an approach as in fig.1. .my-class { background: url('overlay.png') no-repeat center, url('base.png') no-repeat center; background-size: 100% 100%; }fig.1However, if I want slightly different sizes for each of the images, I'm not sure how to do that. I imagine the incantation to be a kind of inline position and dimension definition, as in fig.2. But I haven't gotten it quite right. Does anyone know how to do this? Thanks in advance. .my-class { background: url('overlay.png') no-repeat 0 0 / 100% 90%, url('base.png') no-repeat center 0 0 / 100% 100%; }fig.2