Emperor

Используйте CSS media queries.
Для большого экрана задайте нужный размер/фон, позицию фона, для малого, соответственно, меньше и т.п.
Это очень просто, попробуйте.

Задаётся height нужного значения, а background центрируется + свойство cover (важно!)

background: url("../img/background.jpg") no-repeat top center; /*либо center center*/
background-size: cover;
height: 700px;

Тогда всё должно получиться.

Программа Inkscape.
Можно свои шрифты делать, каждому символу назначается соответствующая клавиша, прописные и строчные буквы считаются отдельно.

Пятая колонка ведет себя так, потому что она последняя в ряду (колонок же 5).
А в Foundation это значит float: right.
В css media для мелких экранов пропишите float: none.
А так да, для этого удобнее всего использовать block-grid с указанием количества колонок для каждого размера.