то есть это ты не для прикола написал, а в самом деле используешь пути не от корня, с троеточием и с кириллицей? Еще пробелов и иероглифов добавь, вообще круто будет.
Вы хотите пересчитать координаты квадратов пропорционально изменению размера картинки?
Пусть
w1 и h1 ширина и высота исходной картинки
w2 и h2 ширина и высота измененной картинки
тогда координаты квадрата
x = x / (w1 / w2)
y = y / (h1 / h2)
Дело не в быстродействии.
Через год ты откроешь этот проект чтобы внести какие-то изменения, и тебе придется вспоминать, в css они или прямо в тегах. А если не ты откроешь, а твой сотрудник - ему будет еще сложнее.
Т.е. технически никто не мешает тебе резать хлеб бензопилой, забивать гвозди микроскопом и ходить в лыжах по асфальту. Но это как-то нехорошо, некрасиво... неправильно?
background не может быть поверх, и не может никуда выходить. Как вариант - добавьте еще один элемент (или псевдоэлемент) и располагайте его как вам угодно.