h3のクラスに（ワードプレス）の背景画像を使用して

Question

私が取得しようとしている効果のイメージである：ここで

は、私が持っている実際の画像は、次のとおりです。

ここで

は、私はこれを試してみましたhttp://ratest10.com/?page_id=2

サイトです。

.widget-container { 
margin: 0 0 18px 0; 
background: #FFFFFF; 
width:204px; 
padding: 0 8px; 
overflow:visible; 
} 
.widget-title { 
color: #222; 
font-weight: bold; 
background: url(images/sidbar-title-bak.png); 
width:240px; height: 45px; 
} 

、その後、オーバーフローなどのバリエーションの周りいじくる試みた：目に見える、とH3を保持するクラスでdiv要素にHTMLの構造を変更し、どこでも取得できませんでした。

これはWordPressのサイトですとhtmlがある...

<li id="categories-2" class="widget-container widget_categories"><h3 class="widget- title">Categories</h3> <ul> 

Answer 1

問題は、白い背景を持つコンテナがあなたのH3と同じ幅ではないということです。しかし、あなたはバックグラウンドポジションを移動させて見ることができます。たとえば、次のように

.widget-title { 
background-position:-19px 0; 
} 

編集：

私はあなたがあなたの画像を見て、白い箱の外にそれをしたい実現し、実際には申し訳ありません。これはあなたがする必要があるものです。

.widget-title { 
position:absolute; 
} 

#main .widget-area ul { 
background-color:#FFF; 
} 

次に、画像の幅を変更する必要がある場合があります。彼らは今や少し長いようです。あるいは、前に述べたようにバックグラウンドのポジションを使うこともできます。