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;}