使用簡單網格覆蓋容器的背景圖像

我使用簡單網格並將網格容器的背景圖像的寬度擴大爲瀏覽器的全寬。我嘗試了多種技術來擴大圖像，但沒有任何工作。我是否應該將容器包裝在另一個div中並將該div用作背景，或者是否存在對我的問題的簡單css修復？使用簡單網格覆蓋容器的背景圖像

HTML（股利ID爲「體包裝網」） TEST

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <link type="text/javascript" src="navicon.js"> 
    </head> 
<body> 

    <!-- Start Navigation Grid --> 
    <div class="grid" id="nav-wrapper-grid"> 
     <!-- Start Columns --> 
    <div class="col-1-1"> 
     <!-- Start Navigation Wrapper --> 
     <nav id="nav-wrapper"> 
      <div id="links"> 
       <a href="#" id="nav-logo"><img src="images/TEST.png" /></a> 
       <ul id="nav"> 
        <li><a href="#">TEST</a></li> 
        <li><a href="#">TEST</a></li> 
        <li><a href="#">TEST</a></li> 
        <li><a href="#">TEST</a></li> 
       </ul> 
      </div> 
     </nav> 
     <!-- End Navigation Wrapper --> 
     </div> 
     <!-- End Columns --> 
    </div> 
    <!-- End Navigation Grid --> 

    <!-- Start Mission Statement Grid --> 

    <div class="grid grid-pad" id="body-wrapper-grid"> 
     <div class="col-7-12" id="iphone-mockup"> 
      <img src="images/iphoneMockup.png" /> 
     </div> 

     <div class="col-5-12" id="mission-statement"> 
      <div id="main-logo"> 
       <a href="#"><img src="images/image.png"/></a> 
      </div> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id malesuada est. Sed elementum magna dictum aliquam fringilla. Pellentesque nec viverra augue. Nam cursus arcu nec bibendum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent est nisl, pretium sed diam a, porta gravida urna. Donec facilisis eleifend lectus, ac facilisis eros vehicula a. Curabitur hendrerit, risus non pharetra semper, mi ipsum viverra arcu, a tincidunt velit neque vitae enim. Cras elementum est sit amet luctus aliquet.</p> 

      <div id="app-store-badge"> 
       <img src="images/appStoreBadge.png" /> 
      </div> 

     </div> 
    </div> 
    <!-- End Mission Statement Grid -->

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    background-color: #cecece; 
    overflow-x: hidden; 
    font-family: 'HouschkaAlt', Fallback, sans-serif; 
} 

@font-face { 
     font-family: 'HouschkaAlt'; 
     src: url('fonts/FontName.eot'); 
     src: url('fonts/FontName.eot?iefix') format('eot'), 
      url('fonts/FontName.woff') format('woff'), 
      url('fonts/HouschkaAlt-Medium.ttc') format('truetype'); 
     font-weight: normal; 
     font-style: normal; } 

#nav-logo img { 
    width: 150px; 
    height: 40px; 
} 

.grid { 
    background-color: #fff; 
} 




/*  NAVIGATION LINKS   */ 

li a { 
     display: block; 
     width:100%; 
     background:#fff; 
     color: #3d6430; 
     font-size: 15px; 
     line-height: 40px; 
     text-decoration: none; 
     margin-top: 5px; 
     padding-left: 20px; 
    } 


/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 

    #nav-wrapper-grid { 
    background-color: #fff; 
    overflow: hidden; 
    width: 100%; 
    left:0; 
    z-index: 100; 
    } 



    #links { 
      width: 960px; 
      margin-left: auto; 
      margin-right: auto; 
      padding-left: 20px; 
     } 


    #nav-logo { 
      float: left; 
      display: inline; 
     } 

    ul { 
     width:100%; 
     background-color: #fff; 
     height: 40px; 
     padding: 0; 
     display: inline; 
     } 

    li { 
     padding: 0 20px; 
     float: left; 
     list-style-type: none; 
     } 

    #menu { 
      display: none; 
     } 

    #body-wrapper-grid { 
     background: url('images/downtown.jpg') 0 0 repeat-x; 
     width: 9999px; 
     padding-bottom: 0px; 
     margin-bottom: 0px; 
     overflow: hidden; 
    } 

    #iphone-mockup img { 
     vertical-align: bottom; 
     margin: 0 auto; 
     padding-bottom: 0px; 

    } 


    #mission-statement { 
     text-align: center; 
     background-color: #fff; 
     margin: 0px; 
     padding: 10px; 
     float: right; 
    } 


    #main-logo img { 
     display: block; 
     margin: auto; 
    } 

    /*  APP STORE BADGE   */ 

#app-store-badge img { 

    width: 200px; 
    height: 50px; 
    padding-bottom: 10px; 
} 
} 

    #features-detail-grid h3, p { 
     text-align: center; 
     color: #3d6430; 
     font-weight: bold; 
    } 

/* Navigtion for Small Devices */ 
@media screen and (max-width: 768px) { 

    #nav-wrapper-grid { 
    background-color: #fff; 
    overflow: hidden; 
    width: 100%; 
    left:0; 
    z-index: 100; 
    } 

    #menu { 
      width:1.4em; 
      display: block; 
      background:#fff; 
      font-size:1.35em; 
      text-align: center; 
      color: #3d6430; 
      float: right; 
      top:0; 

     } 

    #logo { 
      float: none; 

     } 

    #nav.js { 
      display: none; 
      padding: 0; 
     } 

    ul { 
      width:100%; 
      list-style:none; 
      height: auto; 
     } 

    li { 
      width:100%; 
      border-right:none; 
      border-top: 1px solid #3d6430; 
     } 


    } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... }

來源

2014-04-27 cphill

看看這可以幫助你：http://jsfiddle.net/panchroma/DK9rJ/

我已經評論了一些喲你的圖像，因此更容易看到發生了什麼。重要的是，我在你想要全尺寸圖像背景的區域添加了一個包裝，並且這個包裝不在類網格的div範圍內。

<div class="body-background"> 

    <div class="grid grid-pad" id="body-wrapper-grid"> 
    .... 
    </div> <!-- close class="grid grid-pad" id="body-wrapper-grid" --> 
</div> <!-- close body-background -->

由於<div class="body-background">是<div class="grid ..>外面將擴大全寬，你會好到哪裏去。

祝你好運！

來源

2014-04-28 01:13:27

謝謝！這工作完美。 – cphill

很棒@cphill，謝謝你讓我知道 –

使用簡單網格覆蓋容器的背景圖像

回答

相關問題