Image with transparent background color



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>
  <ion-title>À Propos</ion-title>

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


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

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

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



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-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 :

in the bottom scrolling :



Use padding instead of margin


Hi and thanks for your reply,

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

I can’t see the background.


Try put your padding into .background_about


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

Thanks !