How do I get the background-image to cover the page and the buttons to center the image?-CodePudding

I am using angular 13, and below is the CSS I have written.

    .image{
        min-height: 100vh;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    .about-us {
      position: relative;
      margin-top: 20%;
      margin-bottom: 2%;
    }

    .login {
      margin-top: 2%;
      margin-bottom: 2%;
    }

    .social-media {
      margin-top: 2%;
      margin-bottom: 20%;
    }

    .button-box {
      height: 40px;
      width: 80px;
      font-size: 10px;
      border: 1px solid;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
      box-sizing: border-box;
      background-color: rgb(68, 127, 178);
    }

    #text-style {
      text-align: center;
      position: relative;
    }

    <body
      [ngStyle]="{
        backgroundImage: 'url(./../../assets/family-history-image.jpg)'
      }"
      
    >
      <div id="text-style">
        <div  routerLink="/about-us" routerLinkActive="active">
          <button  type="button">about-us</button>
        </div>
        <div  routerLink="/login" routerLinkActive="active">
          <button  type="button">login</button>
        </div>
        <div
          
          routerLink="/social-media"
          routerLinkActive="active"
        >
          <button  type="button">social-media</button>
        </div>
      </div>
    </body>

This is the html I have written and it does not work as intended. The final output shows a top margin for the buttons as well as the image, but I intend the top margin to be only for the buttons, the image should occupy the whole page. This is final output for this code.

CodePudding user response：

Here is a way you can solve your issue using taking a slightly different approach. Of course, you will need to swap out the picsum.photos stock image for your desired image URL.

body {
        min-height: 100vh;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-image: url('https://picsum.photos/1920/1080');
    }

    .about-us {
      position: relative;
      margin-top: 20%;
      margin-bottom: 2%;
    }

    .login {
      margin-top: 2%;
      margin-bottom: 2%;
    }

    .social-media {
      margin-top: 2%;
      margin-bottom: 20%;
    }

    .button-box {
      height: 40px;
      width: 80px;
      font-size: 10px;
      border: 1px solid;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
      box-sizing: border-box;
      background-color: rgb(68, 127, 178);
    }

    #text-style {
      text-align: center;
      position: relative;
    }

<body
      
    >
      <div id="text-style">
        <div  routerLink="/about-us" routerLinkActive="active">
          <button  type="button">about-us</button>
        </div>
        <div  routerLink="/login" routerLinkActive="active">
          <button  type="button">login</button>
        </div>
        <div
          
          routerLink="/social-media"
          routerLinkActive="active"
        >
          <button  type="button">social-media</button>
        </div>
      </div>
    </body>

Hope this helps!

CodePudding user response：

.image {
  min-height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: auto;
}

.about-us {
  position: absolute;
  margin-top: 21%;
  margin-left: 42%;
}

.login {
  position: absolute;
  margin-top: 27%;
  margin-left: 42%;
}

.social-media {
  position: absolute;
  margin-top: 33%;
  margin-left: 42%;
}

I tried this and it did what I wanted to achieve.