Tell us what’s happening:
Describe your issue in detail here.
Did i add the background image wrong ? Because everytime i try to add a blur effect to my backrgound it mess up all the other elements.
Like it wont let me center the inputs with the normal commands. or is there another way i should be commanding the inputs.
Also my labels for my inputs are no showing up because of the background blur, is there a way around this ? what do i need to input so that my elements are showing up behind my background image?
**Your code so far**
/* file: index.html */
<!DOCTYPE hmtl>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>FreeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="bg-image">
<div class="filter-blur"></div>
<h1 id="title">FreeCodeCamp Survey Form</h1>
<p style="font-style: italic;" id="description">Thank you for taking the time to help us improve the platform</p>
<div>
<Form id="survey-form" class="border">
<input id="name" type="text" class="input-box1" placeholder="Enter your name" required> <label class="textlabel1" for="name" id="name-label">Name</label>
<input class="input-box2" id="email" type="email" placeholder="Enter your email" required><label for="email" id="email-label">Email</label>
<input class="input-box3" id="number" type="number" min="18"
max="100" placeholder="age"><label for="number" id="number-label">Age</label>
</form>
</div>
</div>
</html>
/* file: styles.css */
body, {
height: 100%;
margin: 0;
padding:0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify: center
}
.bg-image {
background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Hcz1FFkU3w4Hikbl3TlYewHaE8%26pid%3DApi&f=1');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width:100%;
height:100%;
position: relative;
}
.filter-blur {
background: rgba(240,227,227,0.5);
backdrop-filter: blur(4px);
position: absolute;
height:100%;
width:100%;
z-index:1;
}
h1 {
position: absolute;
z-index: 2;
font-size: 4vw;
font-family: 'teko', sans-serif;
color: black;
text-align: center;
padding-left: 22%;
}
p {
position: absolute;
z-index: 2;
padding-top: 7%;
padding-left: 30%;
color: black;
}
.input-box1 {
position: absolute;
color: black;
z-index:2;
align-items: center;
margin-left: 41%;
margin-top: 20%;
height: 29;
width: 50%;
border-radius: 6px;
}
.input-box2 {
position: absolute;
color: black;
z-index:2;
align-items: center;
margin-left: 34%;
margin-top: 30%;
height:29;
width: 50%;
border-radius: 6px;
}
.input-box3 {
position: absolute;
color: black;
z-index:2;
align-items: center;
margin-left: 27.5%;
margin-top: 40%;
height: 29;
width: 50%;
border-radius: 6px;
}
.text-label1 {
font-size: 3;
position: absolute;
color: black;
z-index: 4;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
