Хочу нарисовать объект в виде подобного нечта (x, y и z — картинки):

1)
+------------+
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
+------------+

2)
+------------+
|xxxxxxxxxxxx|
|x+----------+
|x|yyyyyyyyyy|
|x|yyyyyyyyyy|
|x|yyyyyyyyyy|
+-+----------+

3)
+-----+------+
|zzzzz|xxxxxx|
|zzzzz+------+
|zzzzz|yyyyyy|
+-+---+yyyyyy|
|x|yyyyyyyyyy|
+-+----------+

Нужно, чтобы объект (например, кнопка оформляемая таким способом) был цельным элементом, т.е. события происходили по всему занимаемому изначально x пространству.

Нужно реализовать это только с помощью html/css, без использования дополнительных библиотек.

Вопросы:

1) можно ли реализовать подобное по этим шагам, т.е. накладывая картинки друг на друга?

2) можно ли частично отрисовывать картинки x и y, т.е. указывать, откуда и докуда рисовать нужно, чтобы не происходило масштабирования?

3) есть ли вообще какие-нибудь пути получения этого?

Использовать несколько background-image не нужно.

P.S. Надеюсь, из схемы понятно, чего я хочу.

Во view имеется:

<%= f.text_field(:field, data: {param: controller_path}) %>

Генерируется код:

<input data-param="/controller" ... />

Хочется, чтоб генерировался код:

<input data-param="/controller?a=" + some_javascript_code ... />

Как этого добиться?

Спасибо.