Question

我正在进行一项简单的网页设计任务并且遇到了麻烦。我试图让背景图像垂直重复，但有一个小问题：图像没有显示出来。它位于同一目录中，据我所知，代码是（对W3学校进行交叉检查，主要是）正确的。我欢迎任何想法。

    <html>
    <head>
    <style>
    body
    {
    background-image:url('VerticalTileJPEG.jpg');
    background-repeat:repeat-y;
    }
    </style>
    </head>

    <body>
    <p>Have some text!</p>
    </body>
    </html>

Answer 1

仅当图像文件与调用它的页面位于同一文件夹中时才会起作用。例如，如果它位于图像文件夹中，则路径必须类似于：

background-image:url('images/VerticalTileJPEG.jpg');

如果这没有帮助，请发布更多信息。还要确保使用doctype。

编辑：如果你确定图像的路径是正确的，并且文件名是正确的（包括大写字母），那么也许可以尝试一个速记背景声明：

background:url(images/VerticalTileJPEG.jpg) repeat-x 0 0;

要检查路径是否正确，请转到您的网络检查员（例如Chrome＆gt; [右键单击]检查元素，然后点击右侧（CSS）列中的图片网址。如果浏览器，您会立即看到正在寻找图像。

Answer 2

你告诉它上下重复（沿y轴垂直），但你的身体只有1段高（我猜）不够高，不能一次显示图像。

要垂直重复，您需要在页面下方添加更多内容，或者在html元素上设置背景而不是正文。

要水平重复，请重复-x。

Answer 3

在您的页面中使用Doctype，并确保您在后台所需的图像位于您拥有HTML文件的同一文件夹中，或者如果它位于该目录中的另一个文件夹中，请尝试使用此代码。的背景图像：网址（ '/文件夹名/ picturename.pictureextension'）;

例如，如果图像名称是“xyz.jpg”并且它在文件夹中命名为“images”，则代码将为：的背景图像：网址（ '/图像/ xyz.jpg'）;

Answer 4

（来自评论）

NOX 图像的宽度/高度是多少？
你它应该是垂直重复的，所以教授让我们在 1X1024 创建它。

所以你必须在x轴上重复图像：

body {
    background-image: url('VerticalTileJPEG.jpg');
    background-repeat: repeat-x;
}

一些笔记

确保您的文件名正好为VerticalTileJPEG.jpg（区分大小写）。
确保您的HTML文件和图片位于同一文件夹中。

简单的CSS背景不显示

4 个答案:

一些笔记