Encounter issue with shifting form on a background image

Question

I have encountered issues as shown in the image when I tried to shift the form on the background image. Issues: All textboxes, dropdown list and button width cannot be changed. Below codes are css and registration.html page. Please do help to check the below html and css codes to help me with the issues encountered.

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 */


/* The width cannot be changed after moving form 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;
}


/* The width cannot be changed after moving form to top left */

input[type=number] {
  width: 21%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}


/* The width cannot be changed after moving form 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 the text */

.container {
  position: relative;
  text-align: left;
  color: black;
}


/* Top left text - trying to put the form to the top left but I think it works only for text 
    */

.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'>
    <!-- Encounter 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>

The form has moved to (near) the top left of its container. Could you describe a bit more what the problem is please. — A Haworth, Aug 30 '21 at 08:01
@AHaworth the issue is that once i moved the form to the top left. I could not chnage the width of the textboxes, dropdown list and button in the form — J_Y, Aug 30 '21 at 08:14
@Emaro the issue is that once i moved the form to the top left. I could not change the width of the textboxes, dropdown list and button in the form — J_Y, Aug 30 '21 at 08:14
You have changed the positioning. For width to work the element must have a certain position set. — A Haworth, Aug 30 '21 at 08:19
@AHaworth would it be okay if you show me an example. thank you — J_Y, Aug 30 '21 at 08:20

platypurr · Answer 1 · 2021-08-30T08:35:26.930

1

For using img as a background try to use background-image css instead of img tag.

For example like that

    .header {
  background-image: url("https://image.shutterstock.com/image-photo/close-man-holding-weight-gym-600w-569605795.jpg");
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  
  padding-top: 30px;
  padding-bottom: 135px;
  
  min-width: 1200px;
  height: 100vh;
}

edited Aug 30 '21 at 08:35

answered Aug 30 '21 at 08:05

platypurr

36
6

Thanks it works after adding it to .top-left {...} – J_Y Aug 30 '21 at 09:05

score 1 · Accepted Answer · answered Aug 30 '21 at 08:11

1

Do not use img tag for background image, the container/div in which you want to have a background, put the CSS property background-image: url(../img/gym.jpg); in the stylesheet. An image tag in HTML creates an additional element and to keep the other elements on its top, you will have to do additional styling by making it absolute. The correct way to have image background set it in CSS. Only change it and remove image tag from HTML.

.top-left {
  background-image:url(../img/gym.jpg);
}

answered Aug 30 '21 at 08:11

Talia Asghar

24
2

after adding background-image url my image does not span across the browser even after changing its width :( – J_Y Aug 30 '21 at 08:18
It will span as per the width of the image if you already have set the full width for your container i.e., .top-left. If you want to cover the whole width with image, try using background-size property with contain or cover value. https://www.w3schools.com/cssref/css3_pr_background-size.asp – Talia Asghar Aug 30 '21 at 08:31
May I ask why if I add opacity to the .top-left the opacity will cover my content :( – J_Y Aug 30 '21 at 08:38
1

https://stackoverflow.com/a/41663193/4523567 this might help you in this regard – Talia Asghar Aug 30 '21 at 09:02

Encounter issue with shifting form on a background image

2 Answers2