对于一行就能显示完的标题，在一定的文字大小下，有些设计方案的显示效果确实不错。可是当标题变得长一些之后，固定高度的页头设计就不再适用，因为这时较长的标题会超出背景，显得很难看并难以阅读。
所以，能够适应任何数量的文本内容是一个优秀的、可重用模板的重要特性。这里的使用的方法是，利用css巧妙地设定两幅背景图片。
html代码
<header role="banner">
<h1>Sample Blog</h1>
</header>
创建两幅背景图片
- 第一幅比预想的高度高一些，这幅图片会依照标题文字的长度显示或多或少的部分。
- 第二幅图片会作为页头的底边，这幅图总会出现在标题文字的下方。
css
header[role="banner']{
margin:0;
padding:0;
font-family:"Lucida Grande","Trebuchet MS";
background:#E0E0E0 url(img/topdiv.gif) no-repeat top left;
}
header[role="banner"] h1{
margin:0;
padding:45px 60px 50px 160px;
font-size:200%;
color:#FFF;
background:url(img/toph1.gif) no-repeat bottom left;
}
因为header的显示高度取决于它包含的内容量，所以只有一部分背景会显示出来。
以上css实现的效果便是：
- 当标题文字变长后，topdiv.gif露出了更多部分，toph1.gif的位置自动下移，总是保持在标题文字的下面。
- 反过来也一样。如果标题文字只有一行，并且站长决定使用很小的字体，那么页头就会随之缩小。
有了上面的代码，我们便会拥有一个漂亮的页头，并且可以适应各种未知的变化。
