css - h3 クラス (WordPress) で背景画像を使用する

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

そして、overflow:visible などのバリエーションをいじり、h3 を保持するクラスで html 構造を div に変更しようとしましたが、どこにも行きませんでした。

これは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;
}

そして、画像の幅を変更する必要があるかもしれません。今は少し長いようです。または、前に述べたように背景位置を使用することもできます。