无法为页面 header 显示背景图像

Question

Apologies that this is similar to previously asked questions but I'm relatively new to coding and I'm banging my head against a wall.很抱歉，这与之前提出的问题相似，但我对编码比较陌生，而且我正在把头撞到墙上。

I'm trying to create a personal website, but can't seem to get an image to display behind the header/title at the top of the webpage.我正在尝试创建一个个人网站，但似乎无法在网页顶部的标题/标题后面显示图像。 I know the location works as I can get the image to display independently through html (as a seperate image at the top of the page), but whenever I try to add styling through CSS something stops it working.我知道该位置有效，因为我可以通过 html （作为页面顶部的单独图像）独立显示图像，但是每当我尝试通过 CSS 添加样式时，它就会停止工作。 What's even more confusing is that I can change the background color (through the id selector #header), so I'm not sure what is stopping the background image working.更令人困惑的是我可以更改背景颜色（通过 id 选择器#header），所以我不确定是什么阻止了背景图像的工作。 Any help much appreciated.非常感谢任何帮助。

These are the relevant bits of code:这些是相关的代码位：

HTML code: HTML 代码：

 <body>
        <div id="header">
            <div class="name">
            <h1>Author Name</h1>
            </div class="name">"   
        </div id="header">

CSS: CSS：

h1 {
    margin: 20px;
    text-align: center;
    font-size: 60px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
  }

 #header {
    background-image: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp);
    width:100%;
    height:auto;
}

Answer 1

your css is wrong you need to at a background position like this:你的 css 是错误的，你需要在后台 position 像这样：

How I would implement it:我将如何实现它：

 #header {
    background: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp) no-repeat center center fixed;
    background-size: cover;
    width:100%;
    height:auto;
}

Your way with background-image corrected:你用背景图像纠正的方式：

 #header {
  background-image: url("https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp"); /* The image used */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

Answer 2

First: You have wrong in the html code you should close the <div> with </div> without copy the attributes like id .首先：您在 html 代码中有错误，您应该使用</div>关闭<div> div> 而不复制id之类的属性。

This your code edited这是您编辑的代码

    <div id="header">
      <div class="name">
        <h1>Author Name</h1>
      </div>
    </div>

Second: To see your background image you should take care that size of your image is right if you header is so small the top of image it only desplay and in your example your image is white in top so it seem that's is no image.第二：要查看背景图像，如果 header 太小以至于图像顶部只能显示并且在您的示例中您的图像顶部是白色的，那么您应该注意图像的大小是正确的，所以看起来这不是图像。

Third: You should take care of the background image position.第三：您应该注意背景图像 position。

Here is your code edited.这是您编辑的代码。

 h1 { margin: 20px; text-align: center; font-size: 60px; font-family: "Montserrat", sans-serif; font-weight: 900; } #header { background-image: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp); background-size: cover; background-position: center; width: 100%; height: auto; }

 <div id="header"> <div class="name"> <h1>Author Name</h1> </div> </div>

无法为页面 header 显示背景图像

问题描述

2 个解决方案

解决方案1
0 2022-08-16 12:27:04

解决方案2
0 已采纳 2022-08-16 12:38:36

无法为页面 header 显示背景图像

问题描述

2 个解决方案

解决方案1 0 2022-08-16 12:27:04

解决方案2 0 已采纳 2022-08-16 12:38:36

解决方案1
0 2022-08-16 12:27:04

解决方案2
0 已采纳 2022-08-16 12:38:36