此标题区域如何在所有浏览器上运行？

Question

我刚看到这个浏览器：

http://www.dietriffic.com/

现在，顶部的绿色部分，无论我如何重新调整我的浏览窗口（Chrome），它都可以完全填充或者不显示所有内容。它是如何做到的？这是一张图片吧？他们无法为每个屏幕尺寸做好准备吗？

谢谢！

Answer 1

它在整个标题的宽度上使用horizontally- and vertically-repeated image：

并且在标题中间有一个居中的，不重复的mostly-transparent 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;

在容器元素上。