sharpsss, градиентами https://jsfiddle.net/Ankhena/n5b97ovh/
Старая песочница, придется смотреть через vpn, если вы в России или РБ.
Сейчас расчеты можно упростить за счет кастомных свойств.
ARCHXTEKK,
1. Проще pointer-events: none
2. Вместо абсолюта - гриды.
3. Но вы правы в том, что фоновая картинка это украшение и делается через css, а не вставляется как img в разметку.
bazliiii, очень хорошо.
Теперь вспоминаем как считается ширина. Использовать calc не удобно, потому что width рассчитывает слайдер. Значит, меняем box-sizing и получаем желаемое.
Ещё убираем width 100%, потому что не ясно зачем это вообще.
Заодно можно и с высотой разобраться.
Вам нужно, чтобы второй блок был прибит к правому краю первого. А по вертикали по центру.
Так зачем вы пишете в стилях, поставь по центру по вертикали и по центру по горизонтали?? Логика-то где?
Откуда у второго ширина 100%? Почему у двух блоков задана одинаковая высота, если на картинке один по центру другого?
Если внутри синего есть ещё какое-то содержимое, то нужно показывать всю задачу целиком.
И почитайте про контекст наложения.