background image is not appearing in Ionic viewe or compiled app

Asked

Viewed 1,274 times

0

Background image is not appearing in Ionic viewe or compiled app.

When I put to appear straight in hmtl like this: 

style="background-image:url(../img/santa-filomena3.jpg); background-size: cover;
     background-position: center;"

appeared the background image in the browser, but in Ionic view and compiled app did not appear.

Someone’s had that problem before?

As it was not working in the browser I created it in css, but I could not make it work yet.

Style.css

.ion-content teste{
     background-image: url(.../img/fundo.jpg); 
     background-size: cover;
     background-position: center;
}

main.html

<ion-view view-title="Home">
  <ion-content class="padding"  
               id="teste">

        <div class="row responsive-lg">
              <div class="row">
                <div class="col" >
                  <span><a href="#/app/missa">Missa</a></span>
                </div>
                <div class="col">
                  <span><a href="#/app/doacao">Doação</a></span>
                </div> 
              </div>
              <div class="row">
                <div class="col" >
                  <span><a href="#/app/confissao">Confissão</a></span>
                </div>
                <div class="col">
                 <span><a href="#/app/santaFilomena">Santa Filomena</a></span>
                </div>
              </div>
              <div class="row">
                <div class="col">
                 <span><a href="#/app/secretaria">Fale Conosco</a></span>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <span><a href="#/app/site">Site</a></span>
                </div> 
              </div>

        </div>

    </ion-content>
</ion-view>

Someone could help me?

css ionic

1 answer

0


I got it right away. css

.principal-custom {
     background-color: #FF4500;
     background-image: url(../img/fundo.jpg); 
     background-size: cover;
     background-position: center;
}

main.html

<ion-view view-title="Home">
  <ion-content class="principal-custom">
          <div>
              <div class="row">
                <div class="col" >
                  <span><a href="#/app/missa">Missa</a></span>
                </div>
                <div class="col">
                  <span><a href="#/app/doacao">Doação</a></span>
                </div> 
              </div>
              <div class="row">
                <div class="col" >
                  <span><a href="#/app/confissao">Confissão</a></span>
                </div>
                <div class="col">
                 <span><a href="#/app/santaFilomena">Santa Filomena</a></span>
                </div>
              </div>
              <div class="row">
                <div class="col">
                 <span><a href="#/app/secretaria">Fale Conosco</a></span>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <span><a href="#/app/site">Site</a></span>
                </div> 
              </div>

        </div>

    </ion-content>
</ion-view>

Browser other questions tagged css ionic

You are not signed in. Login or sign up in order to post.