时间戳

首页 > 解决方案 > 是图像文件问题还是大小问题？HTML CSS 背景图片问题

html - 是图像文件问题还是大小问题？HTML CSS 背景图片问题

问题描述

我一直在尝试使用不同的图像作为背景，但到目前为止我很不幸地确定这是照片文件大小的问题还是我使用的图片有问题？询问，因为我尝试使用一张图像并且背景图像显示并且可以工作，但是即使我已经多次查看我的代码并且它是正确的，我想要使用的任何其他图片都不会显示或正常工作。这是我当前的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Winston Berz</title>
        <style>
            body {
                background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
                min-height: 100%;
                background-size: 100%;
            }
        </style>
    </head>
    <body>
        <div id="Navbar">
            <nav>
                <a href="Main P.html">Main</a>
                <a href="About me P.html">About Me</a>
                <a href="Contact P.html">Contact</a>
                <a href="Photos P.html">Photos</a>
            </nav>
        </div>
        <div id="Main Title">
            <header>
                <h1>Winston Berz</h1>
            </header>

    </body>
</html>

还要注意的是，我也为 css 使用了单独的文档并得到了相同的结果，所以这次我求助于内部 css。帮助！请并谢谢你我对编码还是比较陌生。

标签： htmlcssimagebackgroundjpeg

解决方案

you could try to clear your browser cache (here is how) maybe the browser is storing previous images.

Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.

inside the <body> tag you can add

<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>

and inside your css style sheet you add this

.background-images-wrapper{
  height: 100%;
  width: 100%:
  object-fit: cover;
  z-index: -1;

z-index: -1 is to make sure that your images will always stay behind the rest of your elements

推荐阅读