此标题区域如何在所有浏览器上工作？

Question

我刚刚在这里看到了这个浏览器：

http://www.dietriffic.com/

现在，绿色部分顶部，无论我如何调整浏览窗口（Chrome）的大小，它要么完全填满它，要么只是不显示全部。它是如何做到这一点的？这是一个图像吧？他们不可能为每种屏幕尺寸做好准备，不是吗？

谢谢！

Answer 1

它使用 水平和垂直重复的图像 横跨整个标题的宽度：

和 a居中、不重复、大部分透明 PNG 对于标题中间的发光效果：

Answer 2

使用 Firebug：

绿色框是

<div id="header_area" class="full_width">

它使用大小为 50x50 的重复背景图像（绿色），它们用“图块”填充整个 div。 div 始终适合浏览器视口宽度的事实是“full_width”类：

.full_width {
    clear: both;
    width: 100%;
}

它是进行缩放的 width: 100%。

除此之外，居中的文本不是图像，而是真实的文本。它们实现了

margin: 0 auto;

容器元素的居中对齐。