Вы вначале спросили, как делать правильно, а не как попало. Вот то, как сделали вы - делать как раз не надо :-) Что за магическое значение 277px: что будет, если добавить еще несколько пунктов в списке или полей в форме? Придется опять подстраивать отступы. Мне кажется, самым лучшим вариантом в вашем случае будет использовать картинку, а не фон. А с фоном и background-size: contain; нужно соблюдать одно условие: поддерживать соотношение сторон. То есть в случае, когда контент меньше картинки, высота должна соблюдать соотношение; в случае, если больше, то auto. Для того, чтобы соблюсти соотношение высота/ширина, наверное нужно будет добавить фейковый элемент, как-то так. В общем, больше возни с этим получается, логичнее вместо всей этого просто картинку использовать. Я вам не случайно сайт Эпла привел в пример в моем прошлом сообщении. Там много таких моментов. Или вот еще тоже. Можно посмотреть, как сделано вокруг большой картинки.