Html 导航菜单被推到左侧

这是小提琴

我正在设计一个响应迅速的网站，我希望我的img在用户使用较小屏幕分辨率时成为中心。因此，我将css编码如下

img.bg {
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto;
            position: fixed;            
            top: 0;
            left: 0;
        }
        @media screen and (max-width: 1024px) {
            img.bg {
                left: 50%;
                margin-left: -512px;
            }        
        }

但是因为我把img推到了左边，现在我的导航菜单也被推到了左边。单击“折叠”按钮后，菜单无法显示

<div class="navbar navbar-default navbar-fixed-bottom">      
         <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
    </div>

<div class="navmenu navmenu-default navmenu-fixed-left">
        <a class="navmenu-brand" href="#">Project name</a>
        <ul class="nav navmenu-nav">
            <li class="active"><a href="1.aspx">option 1</a></li>
            <li><a href="2.as[x">Option 2</a></li>
            <li><a href="3.aspx">Option 3</a></li>
        </ul>        
    </div>

放弃媒体查询，使用带有背景的div而不是图像，删除固定的最小宽度，设置

background-size:cover;
background-position:center center;

见工作

要从PHP插入图像，只需将背景标记移动到div样式定义：

<div style="background-image:url('<?=$imageurl?>');"></div>

---

PS这里还有一个打字错误：
@RenéRoth，添加了fiddle。尝试调整浏览器宽度，你就会知道我的意思：）图像的链接将从数据库中检索。可以用回去吗？