<style>
* {
margin: 0px;
padding: 0px;
}
#heading {
margin-top: 20px;
}
table {
border-color: black;
margin-top: 30px;
border-radius: 6px;
background-color: lightgrey;
opacity: 0.9;
z-index: 1;
}
table tr td {
padding: 7px;
}
input {
border-color: black;
padding: 5px;
}
#male {
margin-left: 6px;
}
#female {
margin-left: 6px;
}
#rfemale {
margin-left: 6px;
}
a {
text-decoration: none;
color: black;
}
/* Button Styled */
button {
border: 2px solid grey;
background-color: white;
padding: 7px;
border-radius: 5px;
}
/* Background Image Styled */
.bg::before {
background-image: url("pexels-eva-bronzini-7956852.jpg");
background-size: 45% 100%;
background-repeat: no-repeat;
background-attachment: local;
position: absolute;
background-position: center;
content: "";
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;
opacity: 1;
}
label {
font-weight: bold;
} </style>
<body>
<center>
<div id="heading">
<h1>
Employee Details
</h1>
</div>
<div id="underline">
==========================
</div>
<form>
<table border="2px">
<!-- Employee Number -->
<tr>
<td>
<label>Employee Number</label>
</td>
<td><input type="text" name="name" placeholder="Enter your number"></td>
</tr>
<!-- Employee Name -->
<tr>
<td>
<label>Employee Name</label>
</td>
<td><input type="text" name="name" placeholder="Enter your name" required></td>
</tr>
<!-- Gender -->
<tr>
<td>
<label>Gender</label>
</td>
<td><input type="radio" name="gender"><label id="male">Male</label>
<input type="radio" id="rfemale" name="gender"><label id="female">Female</label>
</td>
</tr>
<!-- D . O . B -->
<tr>
<td>
<label>D.O.B</label>
</td>
<td><input type="date" name="DOB" id="DOB"></td>
</tr>
<!-- Department Number -->
<tr>
<td>
<label>Department Number</label>
</td>
<td><select name="DepNo">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</td>
</tr>
<!-- Department Name -->
<tr>
<td>
<label>Department Name</label>
</td>
<td>
<input type="text" name="depname" id="depname">
</td>
</tr>
<!-- Sales Marketing -->
<tr>
<td>
<label>Sale Marketing</label>
</td>
<td><select name="SalesMarketing">
<option value="Manufacturing">Manufacturing</option>
<option value="Wholesaling">Wholesaling</option>
<option value="Retailing">Retailing</option>
<option value="Packaging">Packaging</option>
<option value="Transport">Transport</option>
</select>
</td>
<tr>
<!-- Contact Number -->
<td>
<label>Contact Number</label>
</td>
<td><input type="mob" name="mobile" id="mobile"></td>
</tr>
<!-- Email Id -->
<tr>
<td>
<label>Email Id</label>
</td>
<td><input type="email" name="Emailid" id="Emailid"></td>
</tr>
<!-- Password -->
<tr>
<td>
<label>Password</label>
</td>
<td><input type="password" name="Password" id="Password"></td>
</tr>
<tr>
<td><label>Enter Date and Time</label></td>
<td><input type="datetime-local"></td>
</tr>
<tr>
<td><label>Insert A File</label></td>
<td><input type="file"></td>
</tr>
<!-- Hobbies Checkbox -->
<tr>
<td><label>Check your hobbies</label></td>
<td><input type="checkbox">Painting
<br>
<input type="checkbox">Drawing
<br>
<input type="checkbox">Gaming
<br>
<input type="checkbox">Singing
</td>
</tr>
<!-- Submit and Reset Buttons -->
<tr>
<td align="center"><button type="submit">Submit</button></td>
<td align="center"><button type="reset">Reset</button></td>
</tr>
</table>
</form>
<!-- Background Image -->
<div ></div>
</center>
I created a table within form tag and added a background with class named .bg and styled it using Internal CSS with other elements styled with their related Classes and Ids. I want the background image to be scrollable to the bottom of the webpage as that of the table. I tried using the " background-attachment: scroll; " property in the bg::before property but it failed to serve the result.
CodePudding user response：
Add image to your table as background image. Change your table CSS as below
table {
background-image: url("pexels-eva-bronzini-7956852.jpg");
border-color: black;
margin-top: 30px;
border-radius: 6px;
background-color: lightgrey;
opacity: 0.9;
z-index: 1;
}
You can add other properties to your table.
CodePudding user response：
just use fixed position not absolute
.bg::before {
background-image: url("pexels-eva-bronzini-7956852.jpg");
background-size: 45% 100%;
background-repeat: no-repeat;
background-attachment: local;
position: fixed;
background-position: center;
content: "";
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;
opacity: 1;
}CodePudding user response：
if you want to scroll the background with your table you should use position:fixed;
edit this in your code
Your code
body {
background-image: url("pexels-eva-bronzini-7956852.jpg");
background-repeat: no-repeat;
background-attachment: local;
position: absolute;
background-position: center;
content: "";
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;
opacity: 1;
}
The correct is
.
bg::before {
background-image: url("pexels-eva-bronzini-7956852.jpg");
background-size: 45% 100%;
background-repeat: no-repeat;
background-attachment: local;
position: fixed;
background-position: center;
content: "";
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;
opacity: 1;
}
and change your table css codet to
table {
background-image: url("pexels-eva-bronzini-7956852.jpg");
border-color: black;
margin-top: 30px;
border-radius: 6px;
background-color: lightgrey;
opacity: 0.9;
z-index: 1;
}