Full image in background when clicked redirect to another page

ionic-v1
#1

Please someone help me … I have to create a page fully covered with an image and when clicked any where on the image it should redirect to another page.

Thanks

#2

Place the background at your page ‘ion-content’ element and then add a button to this page with heigth and width 100%, position fixed and place the click event in this button :wink:

1 Like
#3

Thanks dude…:wink:I tried to use an anchor image to redirect to another page…but i cant make the anchor image full screen.

#4

Something like that will work:

ion-content.fullscreen-image {
    background: url('image.jpg') no-repeat;
    background-size: cover;
}

.btn-new-page {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    border: 0;
    background: transparent;
}

HTML

<ion-content class="fullscreen-image">
    <button class="btn-new-page" ng-click="goToNewPage()"></button>
</ion-content>

CONTROLLER

$scope.goToNewPage = function () {
    $state.go('newPageStateName');

    // OR
    $location.path('/newPage');
}
1 Like
#5

button height:100% didnt work for me…so i added padding 100%:laughing:

#6

hey Leo can you help me with this?