重复图像HTML和CSS

我有点困惑如何获得重复的图像与HTML和CSS。在这里，我有这样的代码：重复图像HTML和CSS

<html> 
<head> 
    <title>Test</title> 
    <link rel="stylesheet" href="style.css" media="screen" /> 
</head> 
<body> 

    <div id="top_background"></div> 

</body> 
</html>

，然后在style.css中：

/* Reset CSS */ 

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } 

ol, ul { list-style: none; } 

:focus { outline: 0; } 

/* Content */ 

#top_background { background: url(images/header.png) repeat-x; }

但是当我加载文件，它只是一个空白网页。取出'repeat-x'不会改变任何东西。我对html和css相当陌生，所以我可能会做一些完全错误的事情。谢谢！

来源

2012-04-04 Sawyer Knoblich

也许图像的路径是错误的。 – j08691 2012-04-04 02:36:17

亲爱的看到我的回答，并尝试在您的CSS中实现并根据您的需要设置尺寸。如果我在某个地方滞后，请告诉我。 – w3uiguru 2012-04-04 03:03:02

亲爱的，如果我的回答是正确的，那么你可以接受它。这就是堆栈溢出的工作原理。干杯。 – w3uiguru 2012-04-04 04:46:21

既然它是空的，你的<div>有0 height。

你应该在CSS中设置高度。

来源

2012-04-04 02:36:38 SLaks

或放入一些内容。 – 2012-04-04 02:41:53

_或_，将背景放在'body'元素上。 – powerbuoy 2012-04-04 02:52:58

@powerbuoy：这仍然需要一个高度。 – SLaks 2012-04-04 02:53:22

原因是在您的css维度id="top_background"没有设置。 默认情况下，div包含宽度100％，因为div是块级元素。

在你的情况下，你重复背景图像，所以我们必须设置div的高度来查看背景图像。

它取决于你想要设置多少宽度和高度。

例如：你想重复你的背景图片高达600px和200px.对于请参阅下面的CSS

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    width:600px; 
    height:200px 
}

来源

2012-04-04 03:01:04 w3uiguru

谢谢！我不知道我需要设置一个高度，我认为它会默认有效的。 – 2012-04-04 04:39:16

为什么图像不重复你还没有定义的高度到您的#top_background多数民众赞成。

因此，只要您在y轴或x轴上重复图像，请检查宽度高度并根据您的要求进行设置。

现在您可以添加下面提到的css，并可以根据您的要求设置宽度。

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    height:200px 
}

来源

2012-04-04 04:43:54

重复图像HTML和CSS

回答

相关问题