响应式 html img 背景

Question

大家好，这几天一直在寻找车头灯，这样我的菜单背景就可以看到下面的图片了..但是我找不到解决办法..虽然我已经改变了图片的大小，尽管作出反应.. 我附上了我的代码和相关照片的证据......

<!DOCTYPE html>
<?php 
 session_start();
    if(!isset($_SESSION["username"])){
     header('location: ../index.php');
    }else
    {
    
?>
<html>
 <head>
    <title>G.E.D.</title>
  <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
   .bgimg-1{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("images/sfondo.png");
   }
  </style>
  <style>
     .w3-button
     {
      background-color:#FFFF;
     }
     .tuodiv 
  {
     width: 100%; height: 100%; top: 0; left: 0;
     background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
  }
   
.img {
    max-width: 100%;
}
 
 .img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
  </style>
 </head>
 
<body >
<img src="images/img/sfondo.png" style="background-position:center;"class="img-responsive" alt="Responsive image" />
 
  <div class="w3-top">
   
   <div class="iltuoid">  
  </div>
  </div>
   <div class="w3-display-middle w3-contener" >
   <br><br><br><br>   <br><br><br><br>

   
    <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
    <div class="w3-center" style="margin-top: 40px;">
     <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button" style="background-color:#FFFF;"><i class="fa fa-home"></i>Milano </a>
     <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
     
    </div>
   </div>
   </div>
 </body>
</html>
<?php } ?>

总是有小的剪裁...或者图像太大然后向下移动页面

Answer 1

<html>
 <head>
    <title>G.E.D.</title>
  <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
   .bgimg-1{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("images/sfondo.png");
   }
  </style>
  <style>
     .w3-button
     {
      background-color:#FFFF;
     }
     .tuodiv 
  {
     width: 100%; height: 100%; top: 0; left: 0;
     background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
  }
   
.img {
    max-width: 100%;
}
 
 .img-responsive {
    background:url("https://i.stack.imgur.com/VOGIV.png") no-repeat;
    width 100vw;
    height:100vh;
    background-size:100% 100%;
}
  </style>
 </head>
 
<body >
<div class="img-responsive" ></div>
 
  <div class="w3-top">
   
   <div class="iltuoid">  
  </div>
  </div>
   <div class="w3-display-middle w3-contener" >
   <br><br><br><br>   <br><br><br><br>

   
    <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
    <div class="w3-center" style="margin-top: 40px;">
     <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button" style="background-color:#FFFF;"><i class="fa fa-home"></i>Milano </a>
     <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
     
    </div>
   </div>
   </div>
 </body>
</html>

响应式 html img 背景

Responsive html img background

html

javascript

css

image

responsive