Custom background image for each tab

Ionic Framework ionic-v3
1

In the default app that comes out of the box with three tab windows, [Home], [About], [Contact], I have tried putting different image urls in each of their sass files like this

page-about {
  background: url("http://img02.deviantart.net/a3d2/i/2012/191/c/0/eurovision_turkey_fan_page_background_by_alisarikaya-d56oqze.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}


page-contact {
   background: url("http://alllayedout.com/Backgrounds/Animated_Skullz.gif") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

this leads to no background being displayed.

So then I tried putting this in each of the sass files

Contact.sass

.scroll-content{
     background: url("http://alllayedout.com/Backgrounds/Animated_Skullz.gif") no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }

about.sass
.scroll-content{
background: url(“http://img02.deviantart.net/a3d2/i/2012/191/c/0/eurovision_turkey_fan_page_background_by_alisarikaya-d56oqze.jpg”) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

it just shows the same image on all the pages. This is what my environment is like

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed