HTML背景定位

我一直在试图确定如何做一个像负边界的背景。下面是我所做截至目前HTML背景定位

画面下方显示的图片是我想要的结果

我试着使用负利润率，但没有运气在所有。这里是我的代码，目前

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>

FOR MY CSS

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

}

的答复是真正赞赏。

来源

2014-10-06 PHwpGUY

你可以尝试把一个边距（ - ）或边距（+）的导航栏，以便将重叠背景。编辑：你可以把代码放在jsfiddle中，这样我们就可以看到它。 – nCore 2014-10-06 13:33:07

@nCore放入负边距不会在这里工作是结果http://imgur.com/RXhZLWw导航栏将消失 – PHwpGUY 2014-10-06 13:36:58

@ web-tiki我正在使用引导程序。 – PHwpGUY 2014-10-06 13:37:58

您应该能够通过施加负上边距为main元素来实现你想要的：

margin-top: -40px;

这将拉动DIV了。见http://jsfiddle.net/raad/f6r1Lvf9/embedded/result/

编辑

我已付出了Bootply例如，从问题，并增加了一个负上边距：http://www.bootply.com/5n8DsKXPQG 这似乎做的是需要什么。

来源

2014-10-06 14:09:22 Raad

我试过了，但我没有得到与你的结果相同的结果。 – PHwpGUY 2014-10-06 14:13:26

here http://imgur.com/RXhZLWw它会消失 – PHwpGUY 2014-10-06 14:13:58

@PHwpGUY - 我已经更新了我的答案。 – Raad 2014-10-06 14:48:24

这是负上边距：margin-top: -50px;

所以尽量

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

来源

2014-10-06 14:37:41 yossi

回答

相关问题