Как сделать адаптивный блок?
Когда хотите разобраться с каком-то сайтом / блоком / кодом.
Берите и используйте консоль разработчика, она для этого и придумана.
В браузерах, как правило, вызывается клавишами CTRL+SHIFT+I.
По всем пунктам отвечать подробно лень, поскольку тут вообще всё элементарно.
Вкратце.
1. Можно абсолютным позиционированием (position: absolute;), можно через транформацию (transform: translate;).
2. Самый простой способ: через CSS - background: url('...') 50% 50% / cover no-repeat
По 3-му пункту пример можно посмотреть тут https://jsfiddle.net/webirus/99qfLkbo/
Вчера делал только для другого ответа.
1) Никак. Это не лого, а надпись на всех фотках одинаковая
2) position: relative;
left: 50%;
transform: translateX(-50%); (там та же схема, только на JS)
3) Гуглите: "jquery scrolltop"