如何为HTML网页添加背景图与按钮旁小图，解决图片不显示、尺寸过大问题

一、图片加载失败修复 #

• 补全HTML结构：你现有代码缺失<body>起始标签，会导致浏览器解析异常，在</head>后添加<body>即可
• 静态资源路径修正：从你代码里的{{url_for('home')}}模板语法可以判断你用的是Python Web框架（比如Flask/Django），这类框架的静态资源（图片、css、js）不能和模板文件放在同一目录：
  • 新建static文件夹（和模板目录templates同级），把所有图片放到这个文件夹里
  • 背景图路径修改为：background-image:url({{ url_for('static', filename='wheat.jpg') }});
  • 提交按钮旁的小图（假设文件名是btn_icon.jpg），在提交按钮代码后添加对应img标签即可，可直接通过style属性调整大小和对齐方式
• 检查文件名：确认文件名大小写和后缀完全匹配，比如实际文件是Wheat.JPG的话要和代码里写的完全一致，部署到Linux服务器时大小写是严格区分的

二、背景图过度放大调整 #

你原代码用的background-size: cover属性规则是让背景图完全覆盖body容器，会自动放大裁切超出部分，你可以根据需求替换成以下配置：

• 想要完整显示整张背景图，不裁切：background-size: contain;，缺点是窗口比例和图片比例不一致时会出现空白边
• 想要背景图完全铺满窗口，不留空白：background-size: 100% 100%;，缺点是图片比例和窗口不一致时会拉伸变形
• 想要宽度铺满窗口，高度自适应不变形：background-size: 100vw auto;
• 补充优化：添加background-position: center center;属性，让背景图始终居中显示，就算裁切也只会裁切边缘部分，显示效果更好

修改后完整代码示例 #

<html>
<head>
<title> blah blah </title>
<style>
body{
   background-image:url({{ url_for('static', filename='wheat.jpg') }});
   background-repeat: no-repeat;
   background-attachment: fixed;
   /* 按需修改下面的background-size值 */
   background-size: contain;
   background-position: center center;
}    
</style>
</head>
<body>
    <center>

    <h1> WHEAT SPECIES CLASSIFICATION </h1><br>
    
    <form method="POST" action="{{url_for('home')}}">
       
       <b> compactness :  <input name="compactness" type="number" step="any" min="0" 
                          class="form-control" required> <br><br>
       
       kernel length : <input name="kernel_length" type="number" step="any" min="0" 
                       class="form-control" required> <br><br>

       width : <input name="width" type="number" step="any" min="0" class="form-control" 
               required> <br><br>            

       asymmetry coef : <input name="asymmetry_coef" type="number" step="any" min="0" 
                        class="form-control" required> <br><br>
       
       groove length : <input name="groove_length" type="number" step="any" min="0" 
                       class="form-control" required> <br><br>
       
       <input type="submit" value='predict!' >
       <!-- 按钮旁的小图，宽高、边距可自行调整 -->
       <img src="{{ url_for('static', filename='btn_icon.jpg') }}" alt="图标" style="width:30px;height:30px;vertical-align:middle;margin-left:10px;">
       
    </form>
    
    </center>
    
</body>
    
</html>

内容的提问来源于stack exchange，提问作者spectre