Does anyone know how I can position the background image exactly the way I want it
What have you tried so far? Please post your code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey Form</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">
Thank you for taking the time to help us improve the platform
</p>
<form id="survey-form">
<label id="name-label" for="name">Name</label>
<input
id="name"
type="text"
required
placeholder="Enter your name"
class="block"
/>
<label id="email-label" for="email">Email</label>
<input
id="email"
type="email"
required
placeholder="Enter your email"
class="block"
/>
<label id="number-label" for="number">Age <span>(optional)</span></label>
<input
id="number"
type="number"
min=""
max=""
placeholder="Age"
class="block"
/>
<label>Which option best describes your current role? </label>
<select id="dropdown" class="block">
<option>Select current role</option>
<option>Student</option>
<option>Full Time Job</option>
<option>Full Time Learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
<input type="radio" id="" name="" value="" />
<input type="radio" id="" name="" value="" />
<p>What is your favorite feature of freeCodeCamp?</p>
<select class="block">
<option>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</select>
<input type="checkbox" id="" name="" value="" />
<input type="checkbox" id="" name="" value="" />
<p>Any comments or suggestions?</p>
<textarea
id="textarea"
placeholder="Enter your comment here..."
class="block"
></textarea>
<input type="submit" value="Submit" id="submit" />
</form>
</body>
</html>
body {
margin: 0;
background: #1b1b32;
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Poppins, sans-serif;
color: #f3f3f3;
padding-top: 20px;
}
#title,
#description {
text-align: center;
}
#title {
font-size: 32px;
font-weight: 400;
margin-bottom: 0;
}
#description {
font-size: 18px;
font-weight: 200;
font-style: italic;
margin: 2px auto 30px auto;
width: 800px;
}
form {
background-color: #1b1b32cc;
max-width: 720px;
margin: 0 auto;
border-radius: 5px;
padding: 12px 0 60px 0;
}
.block {
width: 85%;
display: block;
margin: 0 auto;
font-size: 15px;
border-radius: 4px;
}
input.block {
height: 35px;
border: 0;
padding-left: 12px;
padding-top: 2px;
padding-bottom: 2px;
}
select.block {
height: 42px;
width: 82%;
padding-left: 7px;
}
label,
p {
display: block;
font-size: 18px;
margin-top: 30px;
margin-bottom: 10px;
/* text-shadow: 2px 2px 2px; */
}
label {
margin-left: 45px;
}
p {
margin-left: 65px;
}
Not sure where you want it? But I assume you want background-attachment: fixed
on the body selector.
Also, you probably want cover
for the background-size
so the image dimensions do not distort.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.