https://i.sstatic.net/s6eD5.png
Encountering issues depicted in the image while attempting to shift the form on the background image. Problems include the inability to change the width of textboxes, dropdown lists, and buttons. Below are the CSS and registration.html code snippets for review:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
justify-content: center;
align-items: center;
display: flex;
}
li {
float: left;
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
li a {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 3px;
}
li a:hover {
background-color: #b0b0b0;
}
#logo {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* register.html & feedback.html */
/* Width remains constant after form relocation to top left */
input[type=text],
select {
width: 21%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
#feedbkdetails {
width: 25%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* Width remains constant after form relocation to top left */
input[type=number] {
width: 21%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* Width remains constant after form relocation to top left */
input[type=button] {
width: 20%;
background-color: #111;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover,
input[type=submit]:hover {
background-color: #333;
}
/* Container holding the image and text */
.container {
position: relative;
text-align: left;
color: black;
}
/* Top left text - suitable for text only, not forms */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* CSS code for background image */
.bg-img {
opacity: 0.5;
width: 100%;
height: 100%;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/Ex6.css">
<img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/handstand-pose-1419568-1199014.png" id="logo">
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="feedback.html">Feedback</a></li>
</ul>
<div class="container">
<img src='https://image.shutterstock.com/image-photo/close-man-holding-weight-gym-600w-569605795.jpg' class='bg-img'>
<!-- Encountering issue shifting the form here -->
<div class="top-left">
<h2> Registration </h2>
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type="button" name="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>