删除顶部背景图像上的作物

Question

我试图找出如何删除背景图像上的裁剪。基本上底部是好的，但顶部正在裁剪，我不明白为什么。这是我的问题的图像！

如您所见，可以看到底部的圆形边框，但顶部基本上是隐藏的。我尝试过使用position：absolute，background-size：contains，position：relative with z-index或overflow：visible

以下是有关我工作的代码。

HTML

<header class="">
    <div class="container">
        <div class="logo">
            <h1><a href="#">Maru Consulting</a></h1>
        </div>

        <nav class="">
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
        </nav>
    </div>
</header>

CSS

container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; 
}

html,body{
    height:100%; 
    background-image:url('images/maru-bg.jpg'); 
    background-position:center;
}

header{
    background-color:#850707; 
    width:100%; 
    height:40px; 
    margin-top:20px;
}

h1{float:left; margin-right:20px;}

h1 a{
    display:inline-block; 
    text-decoration:none; 
    background-image:url('images/maru-logo.png'); 
    width:306px; 
    height:59px; 
    text-indent:-99999px;
    background-repeat:no-repeat;
    background-position:0 -10px;
    background-size:contain;
} 

nav{float:left;}

nav ul li a{text-decoration:none; color:#fff;}

更新图片