Its not fully opaque because it is showing some of the background of my background image. I tried setting it opaque by setting the opacity to 1 but that did not do anything.
the lines for this code start at line 99 and end at line 109 in the css portion of this code. https://codepen.io/noblegas/pen/BaaVboL
What exactly are you wanting to do? If something is full opaque it will show the background image. Are you or are you not wanting the background to show through on the form?
I assume you are wanting the form to show a bit of the background but not the textarea or buttons of the form. When you set opacity of an element, it has the effect of giving all of its children the same opacity.
To resolve this, you can use rgba with an alpha of 0.8 with purple the following selector:
#form-container .form-box{
background: rgba(128,0,128,0.8);
width:35%;
min-height:100vh;
border-radius:10px;
}
You can play around with the alpha to get the value you desire.
I just want the backgroundcolor of the button to show, not the background image of the main page
See my edited response above.
I also suggest adding width: 100% to your textarea selector to prevent the textarea element from going outside of the form container.
textarea{
margin-top:17px;
padding:15px;
width: 100%;
}