Implement the following CSS code to set a background image on a single-page app (Angular).
.page::before {
content: '';
position: absolute;
background-size: cover;
width: 100%;
height: 100%;
background-image: url("../../assets/weird.png");
opacity: 0.2;
}
...
/* button */
#submit-button {
position: center;
background: #000000;
border-radius: 5px;
font-size: 15px;
padding: 15px 15px 15px 15px;
margin: -15px 15px 15px 15px;
color: white
}
Below is the HTML structure for the page:
<div class="page">
<h1 class="sunrise">Asheville Ipsum</h1>
<h2 class="sunrise">Asheville Infused Lorem Ipusm Generator</h2>
<h3 class="sunrise">Ditch that boring ipsum for some auto-generated, beer infused,</h3>
<h3 class="sunrise">funky smelling, hippster weirdness.</h3>
<div class="inputs">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group" id="short-medium-long">
<mat-radio-group aria-label="Select an option" formControlName="numberOfWords" class="form-control" >
<mat-radio-button value="50">Short</mat-radio-button>
<mat-radio-button value="75">Medium</mat-radio-button>
<mat-radio-button value="100">Long</mat-radio-button>
</mat-radio-group>
</div>
<div class="form-group" id="numberOfParagraphs">
<label>Number of Paragraphs</label>
<input type="number" id="number-field" formControlName="numberOfParagraphs" class="form-control" />
<mat-checkbox formControlName="moreBeer" class="form-control">More Beer!</mat-checkbox>
</div>
<div class="form-group">
<button class="btn btn-primary" id="submit-button">Generate Weirdness</button>
</div>
</form>
</div>
<div class="content" *ngFor="let paragraph of paragraphs">{{ paragraph }}<br><br></div>
</div>
The issue arises after adding the specified CSS when the submit button stops functioning without any error in the console. Removing certain attributes like content and position resolves the issue but affects the display of the background image.
It seems like there might be a conflict within the CSS causing this problem?