CODEWITHSUNDEEP
cssangular
Mark Locklear
Mark Locklear

Reputation: 5335

Setting background image is breaking submit button

Have the following css to set the 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
}

Here is the html:

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

With this css added the submit button no longer works. No console error or anything. Also, I can remove the content or position attributes and it works fine through the background image no longer displays.

I feel like something in the css must be in conflict?

Upvotes: 0

Views: 114

Answers (1)

Avi Thour
Avi Thour

Reputation: 410

I am sure there is no such thing called position: center;.

All of these are the available properties which can be used with position: position:static|absolute|fixed|relative|sticky|initial|inherit;

Changing that CSS property will help you out.

Upvotes: 2

Related Questions