Html 放大时背景变形_Html_Css

Html 放大时背景变形

html css

Html 放大时背景变形,html,css,Html,Css,我几乎完成了我的登录页面，当我缩小时看起来很好，但每当我尝试放大时，我的页面的主div与外部div的背景混合在一起。我不知道是什么问题，从早上开始我就一直在努力解决它这是我的html： <html> <head> <title>login</title> <link rel = "stylesheet" href = "styles and pics/home.css"/> </head> <body

我几乎完成了我的登录页面，当我缩小时看起来很好，但每当我尝试放大时，我的页面的主div与外部div的背景混合在一起。我不知道是什么问题，从早上开始我就一直在努力解决它

这是我的html：

<html>
<head>
    <title>login</title>
    <link rel = "stylesheet" href = "styles and pics/home.css"/>
</head>
<body>
<div id = "outer_div">
<div id = "header_div">
</div>
<div id = "big_wrapper">
<a href = "index.php"><img src = "styles and pics/pictures/login pics/school.jpg" id = "logo"/></a>
    <header>
    <form>
        <table id = "header_table" align = "right">
            <tr>
                <td id = "logo">
                    <a href  = "index.php" id = "logo_link"></a>
                </td>
                <td>
                    <input type = "text" name = "email" id = "email" class = "text" placeholder = "E-mail"/>
                </td>
                <td>
                    <input type = "password" name = "password" id = "password" class = "text" placeholder = "Password"/>
                </td>
                <td>
                    <input type = "submit" name = "submit_login" id = "submit_login" class = "button" value = "log-in"/>
                </td>
            </tr>
        </table>
    </form>
    </header>
    <div class = "slider">
        <img id = "1" src = "styles and pics/pictures/login pics/school.jpg"/>
        <img id = "2" src = "styles and pics/pictures/login pics/Jellyfish.jpg"/>
        <img id = "3" src = "styles and pics/pictures/login pics/Tulips.jpg"/>
        <img id = "4" src = "styles and pics/pictures/login pics/Penguins.jpg"/>
        <img id = "5" src = "styles and pics/pictures/login pics/Koala.jpg"/>
    </div>
    <aside>
        <h1 id = "sign_up_text">Create an account</h1>
    <form method = "POST" action = "index.php">
        <table id = "body_table">
            <tr>
                <td colspan = "2">
                <input type = "text" name = "student_no" id = "student_no" class = "text" placeholder = "Student number"/>
                </td>
            </tr>
            <tr>
                <td colspan = "2">
                <input type = "text" name = "first_name" id = "first_name" class = "text" placeholder = "First Name"/>
                </td>
            </tr>
            <tr>
                <td colspan = "2">
                <input type = "text" name = "last_name" id = "last_name" class = "text" placeholder = "Last Name"/>
                </td>
            </tr>
            <tr>
                <td colspan = "2">
                <input type = "password" name = "stud_server_pass" id = "stud_server_pass" class = "text" placeholder = "Student Server Pass"/>
                </td>
            </tr>
            <tr>
                <td colspan = "2">
                <input type = "password" name = "retype_stud_server_pass" id = "retype_stud_server_pass" class = "text" placeholder = "Student Server Pass"/>
                </td>
            </tr>
            <tr>
                <td colspan = "2">
                <select name = "campus" id = "branches">
                    <option selected disabled>Campus</option>
                    <option value = "campus1">campus1</option>
                    <option value = "campus2">campus2</option>
                    <option value = "campus3">campus3</option>
                    <option value = "campus4">campus4</option>
                    <option value = "campus5">campus5</option>
                </select>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="male"><input type="radio" name="gender" value = "male" class = "gender"/> <span class = "gender_text">Male</span></span>
                </td>
                <td>
                    <span id="female"><input type="radio" name="gender" class = "gender" value = "female"/> <span class = "gender_text">Female</span></span>
                </td>
            </tr>
            <tr>
                <td colspan = "2">
                <input type = "submit" id = "submit_signup" name = "submit_signup" class = "button" value = "sign-up" />
                </td>
            </tr>
        </table>
    </form>
    </aside>
</div>
<div id = "footer_div">
</div>
</div>
<script src = "javascripts/jquery/jquery.js"></script>
    <script src = "javascripts/scripts/login.js"></script>
</body>

每当我尝试调整浏览器大小时，是否应该使用jquery使其响应？如果没有，解决这个问题的最佳方法是什么？创建一个JSFIDLE以直观地了解问题

       * {
          margin:0;
          padding:0; 
        }

         section,article,header,footer {
           display:block;
        }

       body {
           width:100%;
           text-align:center;
           background-color:#B8BFCF;
      }

      #outer_div {
           width:100%;
           background-color:#FFFF30;
      }

      #big_wrapper {
           position:relative;
           max-width:1200px;
           min-width:900px;
           height:520px;
           margin:0 auto;
      }

      #body_tabletr {
           padding:20px 0;
     }

     #body_table {
          position:absolute;
          top:50px;
          left:780px;
          border:1px solid gray;
          height:400px;
          background:linear-gradient(45deg,white,#DEDCDC);
          box-shadow:6px 6px 6px #B8B827;
          font:16px bold callibri;
          margin:0 auto 50px;
          padding:30px 70px;
     }

     #body_table .text {
         width:225px; 
         height:25px;
         outline:none;
         font:20px bold callibri;
         padding-left:5px;
     }

     #body_table td {
         padding-top:10px;
     }

     #branches {
        width:230px;
        height:30px;
        font:20px bold callibri;
        padding-left:5px;
     }

     #submit_signup {
        width:230px;
        height:30px;
        border-radius:12px;
        outline:none;
        border:0;
        background-color:#747CE8;
        color:#FFF;
        font-family:verdana;
        font-weight:700;
        cursor:pointer;
     }

    #submit_signup:hover {
       background:linear-gradient(tobottom,#747CE8,#51569C);
    }

    #header_div {
       height:80px;
       background:linear-gradient(totop,#3333FF,#322747);
       border-bottom:1px solid #000;
   }

   .slider {
       width:800px;
       height:420px;
       overflow:hidden;
       position:relative;
       left:-170px;
       top:30px;
       margin:30px auto; 
   }

     .slider img {
          width:800px;
          height:420px;
          display:none;
     }

     div > img {
       position:relative;
       top:25px;
       left:-100px;
   }

    #footer_div {
       height:50px;
       background:linear-gradient(tobottom,#3333FF,#322747);
       border-top:1px solid #000;
   }

   #header_table {
      position:absolute;
      top:-80px;
      left:630px;
   }

   #header_table .text {
       width:200px;
       height:20px;
       font:16px bold helvetica;
       padding-left:5px;
   }

   #header_table td {
       padding-right:10px;
   }

   #sign_up_text {
      position:absolute;
      top:-10px;
      left:810px;
      text-shadow:0 1px 1px #4d4d4d;
      color:#4B45FF;
      font:40px helvetica;
  }

  #submit_login {
        width:70px;
        height:25px;
        outline:none;
        border:0;
        background-color:#589DFC;
        color:#FFF;
        font-family:verdana;
        font-weight:700;
        cursor:pointer;
  }

 #submit_login:hover {
   background:linear-gradient(tobottom,#589DFC,#5087D4);
 }

 .gender_text {
    font:18px bold helvetica;
 }

 #logo {
   position:absolute;
   height:60px;
   width:120px;
   top:-100px;
   left:35px;
 }