使用角度添加背景图像时出错

Question

我尝试添加背景图像并使用封面让浏览器调整图像大小。但是图像非常小，并不能覆盖整个背景。

我是棱角分明的新手，所以我对它的运作方式有一个很小的想法。

此外，尽管使用zurb管理我的间距，搜索栏也不在中间。

以下是页面

的内容

以下是代码：

<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> 

Answer 1

添加@ Marko的回复，您使用Angular来设置属性样式，但您提供的样式只是静态的。当您希望在运行时根据给定条件应用动态样式时，将使用Angular的ng-style属性。你不是那样做的。您只需提供要内联的静态样式。这并不是真正的最佳实践。最好只使用静态css样式表来做你想做的事。

话虽这么说，你面临的问题纯粹是一个CSS问题，而不是特定角度问题。您只需在#backgroundImage div上调试样式，就可以消除使用ng-style时所涉及的大量复杂性。

这是一个使用整页css背景图片的好教程：http://css-tricks.com/perfect-full-page-background-image/