CSS图像无法制作背景答案

【问题标题】：CSS image not able to make backgroundCSS图像无法制作背景
【发布时间】：2020-10-05 11:44:53
【问题描述】：

我正在编写一个站点并尝试使用 HTML 5、CSS 和 JavaScript 来使站点运行并遇到图像处理问题。我希望图像是背景，但我尝试的一切都没有 div 等覆盖。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<!-- page bar header navigation tabs -->
<div class="head_bg">
  <div class="wrap">
    <div class="logo">
        <a href="index.html">
            <img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"> 
             </img>
            <div class="banner" id="move-top">
                <img id="circular_clip" src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/bg-tablet-pattern.svg"></img>
            </div>
        </a>
    </div>
   </div>
</div>

CSS

div.banner {
   width: 780px;
   margin-top: 0px;
   margin-left: 800px;
} 
.head_bg {
    margin-top: 25px;   
}
#circular_clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}
.banner {
   background-position: -20px 0px;
   /* clip:rect(500px,50px,500px,0px); */
} 
.menu-left {
    text-align: right;
}

.logo {
    margin-top: 15px;
    padding: 4px 4px 4px 4px;
}
.menu_head_banner a {
   active: true;
}

.wrap {
   margin: 0px auto;
 }

.header_row_tabs a li ul {
  margin-top: 15px;
  float: center;
  font-size: medium;
  font-family: 'Lato', sans-serif;
  padding: 33px 15px;
  display: block;
  text-align:center;
  align-items: right;   
}

.header_top_background li {
   font-size: large;
   padding: 0.45em 1em 0.55em 1em;
   background: #EB6841;
   float: right;
   border-bottom: 5px solid #BA3A14;
   border-right: 5px solid #CD542F; 
 }

我希望使用 bg-tablet-pattern.svg 作为背景 .banner{ background-image:url();} 然后是 background:url();和 HTML 中的样式，如果 CSS 在那里，它会看到我想要背景中的图像。我知道图像是正确的，因为我可以看到它，但我希望它从右到左穿过页面，位置覆盖页面的一角，这就是为什么我有定位，虽然它仍然没有从页面顶部。我可以使用 css 获取背景图像，尽管现在我尝试将元素移动到页面的不同部分，但它不会保持静止。有没有办法设置背景图片不调整？

更新

虽然我在 StackOverflow 上遇到了一些类似代码问题的问题，但我定位了图像，尽管仍有一些我尚未发布的响应元素，但这确实解决了图像的位置。 CSS Image positioning

【问题讨论】：

我看到一些 src 标签指向本地文件 (file:///C:/Develop...)。会是这样吗？尝试将它们更改为/images/logo.svg
我暂时还在本地环境中。同样，当我将其设置为背景时，我可以看到图像。当我完成后，我将在同一个主机中拥有与该站点相关的图像。 @Flet
我可以使用 css 获取背景图像，尽管现在我尝试将元素移动到页面的不同部分，但它不会保持静止。有没有办法将背景图片设置为不调整？

标签： html css image css-position

【解决方案1】：

很酷，我有一个答案

添加这段代码到你的 CSS 注意到所有带有标签主体的东西都会有这个图像在它后面因此，如果您希望它覆盖整个页面，您应该将所有网站代码放在一个正文标记之间，一个在顶部，一个在底部

body {
  background-image: url("Image.jpg");
}

这是一个 HTML 代码示例供参考

    <!DOCTYPE html>
    <html lang="en">
    <html>
<body>
<p1>This is a Test<div>
You should see a Background Image</div>
</p1>
</body>
    </html>

让我知道它是否适合你我也希望我能帮上忙

【讨论】：

我试过了，但没用，谢谢。
嘿，很抱歉，您的评论回复太晚了，很高兴向我们展示您的做法或提供您使用的页面或资源