Image with transparent background color

@jewom wrote:

Hi,

I use Ionic2 with the -tutorial instalation for my project.
I would like to have an image in the center and a background-color (with transparency) above the image in one page.

It's working fine, but when I put a div inside with a margin, I have in my page a margin in top and in botom in white.

My page.html :

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>À Propos</ion-title>
</ion-navbar>

  <ion-content class="background_about">
    <div class="background_about_color">

    <div>

      <div class="layer_about_1 layer_about_margins">
        <div class="margin_div">
          Hello1
        </div>
      </div>

      <div class="layer_about_2 layer_about_margins">
        <div class="margin_div">
          Hello2
        </div>
      </div>

      <div class="layer_about_1 layer_about_margins">
        <div class="margin_div">
          Hello3
        </div>
      </div>

</div>

    </div>

</ion-content>

My page.scss :

.background_about {
    background: url(../../img/logo.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.background_about_color {
    background-color: rgba(246, 36, 89, 0.89);
}

.layer_about_margins {
    margin-top:20px;
    margin-bottom: 20px;
}

.layer_about_1 {
    background-color: rgba(219, 70, 117, 0.83);
    width: 100%;
    height: 100%;
}

.layer_about_2 {
    background-color: rgba(162, 17, 54, 0.83);
    width: 100%;
    height: 100%;
}

The result (you can see, is like if the background-color used the same margin than the class "layer_about_margins" for the top and the bottom of the page, scrolling) :

in the top scrolling :

2.png500x889 91.3 KB

in the bottom scrolling :

1.png500x889 131 KB

Thanks

Posts: 5

Participants: 2

Read full topic