When trying to add a background image and set it to cover the entire browser window, I encountered an issue where the image appeared very small and did not fully cover the background.
As someone new to Angular, my understanding of how this process works is limited at the moment.
In addition, despite using Zurb for spacing management, the search bar does not appear centered on the page.
Below is what the current page looks like:
And here is the code snippet in question:
<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">
</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">
</div>
</div>
</div>
</div>
</div>