I am currently working with Angular version 13 and have included the following CSS code.
.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)'
}"
class="image"
>
<div id="text-style">
<div class="about-us" routerLink="/about-us" routerLinkActive="active">
<button class="button-box" type="button">about-us</button>
</div>
<div class="login" routerLink="/login" routerLinkActive="active">
<button class="button-box" type="button">login</button>
</div>
<div
class="social-media"
routerLink="/social-media"
routerLinkActive="active"
>
<button class="button-box" type="button">social-media</button>
</div>
</div>
</body>The HTML code I have written does not function as expected. The result displays a top margin for both the buttons and the image, whereas I intended the margin to only apply to the buttons, allowing the image to fill the entire page. Here is the final output of this code.