HTML背景定位

Question

我一直在試圖確定如何做一個背景，如負邊距。 這是我到目前為止所做的照片

下圖顯示了我想要的結果

我試圖使用負的利潤，但根本沒有運氣。 這是我到目前為止的代碼

HTML

  <div class="container">
                  <div class="navbar navbar-custom radius-fixer nomargin" role="navigation">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                </button>
                              </div>
                              <div class="navbar-collapse collapse nopaddingright">
                                <ul class="nav navbar-nav">      
                                  <li class="active"><a href="<?php echo home_url(); ?>">HOME</a></li>        
                                  <li><a href="about-us">ABOUT US</a></li>
                                  <li><a href="faq">FAQ</a></li>
                                  <li><a href="contact-us">CONTACT US</a></li>
                                  <li><a href="online-forms">ONLINE FORMS</a></li>
                                  <li><a href="virtual-clinic-tour">VIRTUAL CLINIC TOUR</a></li>    
                                  <li><a href="blog" class="noborder">BLOG</a></li>              
                                </ul>                       
                              </div><!--/.nav-collapse -->
                          </div><!--/.container-fluid --> 
</div>

<div class="clearfix" id="main">
  <div class="container">
    <div class="flexslider nomargin">
                      <ul class="slides">
                        <li>
                            <img src="SLIDER1"  />
                          </li>
                          <li>
                            <img src="SLIDER2"  />
                          </li>
                          <li>
                            <img src="SLIDER3"  />
                          </li>
                      </ul>      
    </div>
  </div>
</div>

對於我的CSS

  #main{
  background: #bf35bc;
  background-position: top;

}

非常感謝您的答復。

Answer 1

您應該可以通過對main元素應用負的上邊距來實現所需的目標：

margin-top: -40px;

那將使div上升。 參見http://jsfiddle.net/raad/f6r1Lvf9/embedded/result/

編輯

我從問題中派生了Bootply示例，並添加了負的上邊距： http : //www.bootply.com/5n8DsKXPQG它似乎在執行所需的操作。

Answer 2

這是負的上邊距： margin-top: -50px;

所以嘗試

#main{
   background: #bf35bc;
   background-position: top;
   margin-top: -50px;
}