Zaokrąglona stopka, chowanie elementu za widoczne pole przeglądarki Opcje

[jakistyp]

Chciałbym osiągnąć taki efekt: http://postimg.org/image/cawr03tgh/

Próbowałem w ten sposób:

Kod

footer {
    background-color: #1f2e4a;
    width: 100%;
    height: 150px;
    border: 6px solid #488dab;
    border-radius: 75%;
    position: absolute;
}

Działałem na samej opcji w HTML <footer>

Oczywiście moim sposobem to wychodzi pół na pół. 50% obrazka w poziomie powinno być schowane za polem widzenia wtedy efekt wyszedłby bez problemu. Niestety pojawiają się suwaki, nie mogę tego elementy schować.

Prawdopodobnie albo źle kombinuje albo źle to rozpisałem.

[jakistyp]

No obrazek nie daje efektu bo jest obrazkiem. Chcę dopiero osiągnąć dokładnie taki efekt jak jest przedstawiony na obrazku.

Ale dam swoją próbę rozwiązania problemu: https://jsfiddle.net/s6q2z7hn/
Nie wiem jak do tego odpowiednio podejść... generalnie chcę aby ten obrazek był w pełni elementem CSS.