2013-10-21 39 views
-1

我嘗試添加背景圖片並使用封面讓瀏覽過的圖片調整大小。然而,圖像非常小,並沒有覆蓋整個背景。使用角度添加背景圖片時出錯

我是新來的角,所以我對這是如何工作有一個非常小的想法。

此外,儘管使用zurb來管理間距,但搜索欄並不在中間。

這裏是頁面的樣子enter image description here

下面是代碼:

<div > 

    <!-- Above fold --> 
    <div class="row"> 

     <div id = "backgroundImage" class="large-12 small-12 columns" ng-style="{'background-image':'url(img/mainBackground.png)','background-size' : 'cover'}"> 

      <!-- search bar --> 
      <div class="row"> 

       <!--empty --> 
       <div class="large-3 small-3 columns"> 
        &nbsp; 
       </div> 

       <div class="large-6 small-6 columns"> 
        <input type="text" id="searchBar" ng-style="{'width': '50%'}"> 
       </div> 

       <!--empty --> 
       <div class="large-3 small-3 columns"> 
        &nbsp; 
       </div> 

      </div> 

     </div> 
    </div> 

</div> 
+0

基於代碼您提供,造型是通過AngularJS的div提供絕對沒有好處。使用樣式表。 – Marko

回答

1

添加到@馬爾科的迴應,您使用的角樣式屬性,但您提供的樣式只是靜態的。 Angular的ng-style屬性旨在用於具有基於給定條件的運行時應用的動態樣式。你沒有這樣做。您只需提供內嵌的想要應用的靜態樣式。這並不是最佳做法。最好是使用靜態CSS樣式表來做你想做的事。

這就是說,你面對的問題純粹是一個CSS,而不是一個角度特定的問題。你只需要在你的#backgroundImage div上調試你的風格,你將消除使用ng-style時涉及的很多複雜性。

下面是使用全頁面的CSS背景圖像一個很好的教程:http://css-tricks.com/perfect-full-page-background-image/

+0

感謝您的闡述,我很懶惰:) – Marko