my css
body{
background-image: url("https://th.bing.com/th/id/R.e501cc115ecbb005d079f04e40c6ce66?rik=yoQqdNvxvBug1Q&riu=http%3a%2f%2fwww.wallpaperbetter.com%2fwallpaper%2f916%2f817%2f70%2fscotland-highland-valley-mountain-road-clouds-sky-sunset-1080P-wallpaper.jpg&ehk=v2AoboWiB%2bCdXFKt89ZFDVaYMWg5xvf5yZFqxktyUNs%3d&risl=&pid=ImgRaw&r=0");
background-size: cover;
background-position: center;
background-repeat: repeat;
background-attachment:fixed;
background-position: center;
text-align: center;
color: white;
}
header{
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}
#title{
border: solid white;
border-width: 50%;
}
.notbold{
font-weight: normal;
font-size: 20px;
}
.background-box{
display: grid;
justify-content: center;
background-color: white;
border: 2px solid black;
opacity: 0.4;
color: black !important;
width: 40%;
line-height: 1.8;
}
.margino{
margin: auto;
}
#number-label, #email-label, #name-label, #dropdown-label, #boots-label{
line-height: 2.2;
}
My HTML
<header>
<h1 id="title">Outdoors Lover Survay Form</h1>
<p class="notbold"><i><u>Thankyou for filling out this form</u></i></p>
</header>
<form id="survey-form" class="background-box">
<div class="margino">
<label for="name" id="name-label">Name:</label><br>
<input type="text" id="name" name="name" placeholder="Enter your name"><br>
<label for="email" id="email-label">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your Email"><br>
<label for="age" id="number-label">Age (optional): </label><br>
<input type="number" id="number" name="age" placeholder="Enter your age"></label><br>
<label for="dropdown" id="dropdown-label">What is your favourite location to walk?</label><br>
<select name="dropdown" id="dropdown">
<option value="hills">Hills</option>
<option value="mountains">Mountains</option>
<option value="feilds">Feilds</option>
<option value="beach">Beach</option>
<option value="Forrests">Forrests</option>
<option value="mash-swampland">Marsh/Swampland</option>
</select><br>
<label for="weather" id="weather-label">What is your favourite weather to walk in?</label><br>
<input type="radio" id="weather" name="sunny">Sunny</input>
<input type="radio" id="weather" name="rainy">Rainy</input>
<input type="radio" id="weather" name="windy">Windy</input><br>
<input type="radio" id="weather" name="calm">Calm</input>
<input type="radio" id="weather" name="stormy">Stormy</input>
<input type="radio" id="weather" name="scorching">Scorching</input><br>
<label for="boots" id="boots-label">What type boots do you own?</label><br>
<input type="checkbox" id="leather" value="leather">Leather</input><br>
<input type="checkbox" id="soft-skinned" value="soft-skinned">Soft-Skinned</input><br>
<input type="checkbox" id="gortex" value="gortex">Gortex</input><br>
<label for="comments" id="comments-label">Aditional comments:</label><br>
<textarea id="comments" name="comments" rows="5" cols="50" placeholder="please write here"></textarea><br>
<input type="submit" value="submit"></input>
</div>
</form>
just wondering if anyone knows how to make the white box I have in the background translucent but the text within solid and how I can make this box and text center on the page while having its width halved. I can get it to center on the page but then the white box fills the page and if I get it to be at the size I want then I cant seem to get the box and text to center. Thanks.