Image with transparent background color

Ionic Framework ionic-v3
1

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 :

image
2.png500×889 91.3 KB

in the bottom scrolling :

image
1.png500×889 131 KB

Thanks

2

Use padding instead of margin

3

Hi and thanks for your reply,

But using padding instead of margin, make the result not good :

image
3.png1440×2560 109 KB

I can’t see the background.

4

Try put your padding into .background_about

1 Like
5

It’s working ! But if I put the padding into .background_about_color :slight_smile:

Thanks !