css - background image missing in slides ionic rc 2 -
my intention have slide background image background image missing in ion-slide.background image working fine in other pages.the following code.......
typescript import { component } '@angular/core'; import { modalcontroller, menucontroller, navcontroller } 'ionic- angular'; import { viewcontroller } 'ionic-angular'; // import { registrationpage } '../event-create/event-create'; import { linktoregistration } '../about/about'; import { modalpage } '../modal/modal'; import { userdata } '../../providers/user-data/user-data'; // import * moment 'moment'; // import * firebase 'firebase'; declare var firebase: any; export interface slide { title: string; description: string; //image: string; } @component({ templateurl: 'tutorial.html' }) export class tutorialpage { slides: slide[]; showskip = true; public time: any[] = []; amp = ""; count = 0; aseats = 0; gathering = 0; start = 0; sfix =""; date = 0; constructor(public navctrl: navcontroller, public menu: menucontroller, public modalctrl: modalcontroller, public viewctrl: viewcontroller, public userdata: userdata) { // this.navctrl = navctrl; var db = firebase.database(); // var ref = db.ref("dcuser"); var time = db.ref("dcsession details"); // date , time================== time.on("child_added", (snap)=>{ // this.count++; // var active = db.ref('dcsession details/'+session+'/usergroup); console.log("added:", snap.key); if(snap.val().sessionstatus == "active") { var session = snap.key; var active = db.ref('dcsession details/'+session+'/usergroup'); // ===================================================testing active.on('child_added', (spsnapshot) => { if(spsnapshot.val().usersessionstatus == "active") { this.count++ } }, function (errorobject) { console.log("the read failed: " + errorobject.code); }); // ==========================================================================testing console.log("sessionid:"+session); this.userdata.setsession(session); this.time.push({date: snap.val().date, start: snap.val().startingtime, aseats: snap.val().allottedseats }); this.aseats = snap.val().allottedseats; this.gathering = snap.val().gatheringcount; if(this.gathering == 1) { this.sfix = "st"; }else if(this.gathering == 2) { this.sfix = "nd"; }else if(this.gathering == 3) { this.sfix = "rd"; }else { this.sfix = "th"; } this.date = snap.val().date; this.start = snap.val().startingtime ; // var hours = this.start.gethours() % 12 || 12; // 12h instead of 24h, 12 instead of 0. this.amp = this.start >= 12 ? 'pm' : 'am'; console.log("hor"+this.start); console.log("date"+this.date); console.log("ampm"+this.amp); console.log("asets"+this.aseats); } console.log("time:",json.stringify(this.time)); }); // ============================== this.slides = [ { title: '<b></b>', description: '<b> </b>', // image: 'assets/img/ica-slidebox-img-1.png', } ]; } presentmodal() { let modal = this.modalctrl.create(modalpage); modal.present(); } dismiss() { this.viewctrl.dismiss(); } startapp() { console.log("btton click detected"); this.viewctrl.dismiss(); this.navctrl.push(linktoregistration); } onslidechangestart(slider) { this.showskip = !slider.isend; } ionviewdidenter() { // root left menu should disabled on tutorial page this.menu.enable(false); } ionviewwillleave() { // enable root left menu when leaving tutorial page this.menu.enable(true); } } // modal content scss file===========================================
.tutorial-page { .toolbar-background { background: #4795e2; border-color: transparent; } .dcslide-img1{ //background: url('../../img/slides_slide1_wodots.svg'); // background-color: blue; background: url('../assets/img/slides_slide1_wodots.svg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .dcslide-img2{ //background: url('assets/img/slides_slide2_wwodots.svg'); background-color: blue; background: url('../assets/img/slides_slide2_wwodots.svg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .dcslide-img3{ // background: url('../../img/slides_slide3_wodots.svg'); background-color: blue; background: url('../assets/img/slides_slide3_wodots.svg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .dcslide-header-title{ font-size: 12px; color:#a8d4ff;//#2975c0; margin-top: 3px; padding: 10px; font-size: 14px; text-align: left; } .dcslide-aloava-value{ font-size: 45px; color: #ffffff;//#044a8e; font-weight: bold; } .dcslide-aloava-text{ font-size: 15px; color:#ffeb3b;//#2975c0; text-transform: lowercase; } .dc-name{ text-align:center; font-weight:bold; margin-top: 40px; color:#ffffff } .dc-name-p{ text-align:center;color:#003061;text-transform: lowercase; } .dcslide-badge{ font-size: 18px; } .dcslide-heart-icon{ color: #96ffa2;margin-right: 1px;margin-top: 5px; margin-bottom: 5px; } .dcslide-pepole-icon{ color: #ff4848; margin-right: -1px; margin-top: 0px; margin-bottom: 2px; font-size: 18px !important; } .card-header{ font-size: 18px; text-align: left; color: #fff; } .slide-zoom { height: 100%; } .dc-count-panel{ background-color: #0a6bc8;//rgb(150, 203, 255);//rgba(255, 255, 255, 0.1); } .slide-title { margin-top: 2.8rem; } .slide-image { max-height: 50%; max-width: 60%; margin: 36px 0; } .image-holder { display:inline-block; position: relative; } .image-holder:after { content:''; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; opacity: 0.7; display: block; position: absolute; background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); } .image-holder:hover:after { opacity: 0; } //slide 2 .item-inner{ border-bottom: 0px solid #dedede; } ion-badge{ padding: 1px 5px !important; background-color: #0a6bc8 !important; color: #ffffff !important; } .hed-transparent{ background: transparent !important; } .swiper-container-horizontal > .swiper-pagination{ bottom: 50%; left: 3px; width: 0; } .join-monthly-btn{ margin: 0; height: 5.6rem; font-size: 2rem; background-color: #044f78; } .dcslide-time{ font-size: 55px; color: #ffffff; } .dcslide-ampm{ color: #96cbff; } .dcslide-date{ font-size: 18px; margin-left: -10px; color: #012548; } .fab-footer { z-index: 99; } .button-dark{ color: #0a6bc8; background-color: rgba(255, 255, 255, 0.65); font-size: 1.4em; } .bar-footer { //background: url(../../img/footer-wireframe.png) repeat-x; height: 2px; position: absolute; right: 0; bottom: 44px; left: 0; } b { font-weight: 500; } p { padding: 0 40px; font-size: 14px; line-height: 1.5; color: #60646b; b { color: #000000; } } } html file ================================
<ion-header no-shadow> </ion-header> <ion-content> <ion-slides [options]="{pager: true}" (ionwillchange)="onslidechangestart($event)"> <ion-slide class="dcslide-img1"> <ion-grid class="dc-count-panel"> <ion-row> <ion-col width-26> <div class="dcslide-header-title"> creative's {{gathering}}{{sfix}} monthly gathering </div> </ion-col> <ion-col width-35> <div class="dcslide-aloava-value">{{aseats}}</div> <div class="dcslide-aloava-text">allocated seats</div> </ion-col> <ion-col width-35> <div class="dcslide-aloava-value animated infinite flash">{{ aseats-count }}</div> <div class="dcslide-aloava-text">available seats</div> </ion-col> </ion-row> </ion-grid> <h3 class="dc-name">creatives / </h3> <p class="dc-name-p"> <ion-icon name="quote"></ion-icon> established spread awareness various arts , raise ceiling of creativity among creatives in . <ion-icon name="quote"></ion-icon> </p> <button ion-button icon-only fab dark fab-bottom fab-center class="fab-footer" (click)="presentmodal()"> <ion-icon name="finger-print" is-active="false"></ion-icon> </button> <div class="bar-footer"></div> </ion-slide> <ion-slide class="dcslide-img2"> <ion-item class="hed-transparent"> <ion-badge item-right> <ion-icon name="people" class="dcslide-heart-icon" item-left></ion-icon> {{ aseats-count }}/{{aseats}} </ion-badge> </ion-item> </ion-slide> <ion-slide class="dcslide-img3"> <ion-item class="hed-transparent"> <ion-badge item-right> <ion-icon name="people" class="dcslide-heart-icon" item-left></ion-icon> {{ aseats-count }}/{{aseats}} </ion-badge> </ion-item> <br/><br/> <div class="dcslide-time">{{start}} <span class="dcslide-ampm">{{amp}}</span></div> <div class="dcslide-date">{{date| date:'eee, mmmm dd'}}</div> <!-- <div class="dcslide-date">{{date| date:'eee, mmmm dd'}}</div>--> <ion-footer> <button ion-button icon-right block (click)="startapp()" class="join-monthly-btn"> join monthly gathering <ion-icon name="arrow-forward"></ion-icon> </button> </ion-footer> </ion-slide> </ion-slides> </ion-content>
try write full img url in css without ../ , , check if helps bring missing background image.
background: url('full url');
Comments
Post a Comment