CSS标题样式

Question

只是想知道如何样式标题像附加的图像。正在考虑使用两个div，左边是文字，右边是水平重复图像。问题是我需要正确的div的宽度来改变不同的头部长度。

任何帮助，将不胜感激！

header image

Answer 1

你可以简单地做到这一点;

.header{ 
    width:100%; 
    height:20px; 
    background:url('http://jsfiddle.net/favicon.png') repeat; 
} 
.header span{ 
    background-color:#FFF; 
    display:inline-block; 
    height: 20px; 
} 

<div class="header"><span class="title">Header Text</span></div> 

您可以在各种页面中包含此项，并相应地调整标题空间的大小。

Here是一个工作现场演示

Answer 2

，你可以只用<h1>标签语义的原因，和广告背景图像给它做。 使用填充右键，您现在可以控制其重复次数以及填充所需空间的次数。

Answer 3

使用左，右DIVs与各自width，然后到right div使用text-align: right;属性，以便在合适的DIV中加载的内容将保持向右，并增加至左取决于内容大小

<div class="header"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

.header{overflow: hidden;} //Considering width: 1000px; 
.left{float: left; width: 100px;} 
.right{float: right; width: 900px; text-align: right;}