Top header bar with background image

ionic-v1
1

Hello All,

I just started to work on ionic application which uses angular js , HTML and CSS. I am totally new for these all technologies.

In my application, I want to create same like below attached image where facebook logo appears in top headerbar as background image. How Can I do that ?

I already put image in images folder and give correct path but image is not loaded. If I put some content in that like any text at that time image is showing but not like this.

I am looking something as like this google play screenshot.

image
Screenshot_2015-07-28-11-00-38.png1080×1920 252 KB

Code

<div ng-controller="TempCtrl" name="temp">
    <ion-content ng-class="{expanded:$scope.isExpanded}">
        <div class="hero slide-up" style="background-image: url('images/fblogo.png');">
            <div class="content">
                <div class="avatar" style="background-image: url('images/daenerys.jpg');"></div>
            </div>
        </div>
        <h4 class="content padding">Application</h4>

        <div>
            <div class="buttons" ng-click="showList()">
                <button class="button button-balanced"> Install </button>
            </div>
        </div>
    </ion-content>
</div>

app.js

pmApp.controller('TempCtrl', function ($scope, $state, $ionicPopup) {
    $scope.listdata = [];

    $scope.showList = function () {
        $scope.listdata = [];
        for (var i = 0; i < 100; i++) {
            $scope.listdata.push(i)
        }

        var listPopup = $ionicPopup.show({
            template: '<ion-list>                                ' +
                '  <ion-item ng-repeat="item in listdata"> ' +
                '    {{item}}                              ' +
                '  </ion-item>                             ' +
                '</ion-list>                               ',

            title: 'List',
            scope: $scope,
            buttons: [
                {
                    text: 'Cancel'
                },
     ]
        });

    }


});

I could not able to see any error in my console.

Please help me to create this template page.

2

I published a component on the ionic market doing exactly what you want, feel free to check it out. https://market.ionic.io/plugins/ionic-profile-header

EDIT: I also included an example of the play store app. Feel free to check out the result on ionic view (app id : 797ecd0e)