浮动后的背景重复：左

Question

我正在处理Web表单页面，我对.css

有一个奇怪的问题

我正在尝试设置页面：

• 标题（左侧为Logo.jpg;中间为页面标题）
• 内容（GroupBoxes等）

要设置标题，我使用以下代码：

 <section class="main-page" style="position: relative; border-top: solid 2px #000">
        <div style="position: absolute; top: 0; left: 0; height: 45px; padding-left: 10px;">
            <img src="../Images/Origin/logo.jpg" style="height: 45px" />
        </div>
        <div style="width: 100%; margin: 0 auto;">
               <div>
            <hgroup class="title">
                <h1><%: Title %></h1>
            </hgroup>
        </div>
        </div>
    </section> 

和我的.css

html {
        background: url("../Images/Origin/background2.jpg") no-repeat center center;
    background-size:cover;
    clear: both;
    margin: 0;
    padding: 0;
}

.float-left {
    float: left;
}
hgroup.title {
    /*margin-bottom: 10px;*/
    text-align: center;
}

问题是背景重复（如图所示）。当我设置为例如float：left - 背景不重复（这是好的）但文本在左边...