＃site-titleをRESIZABLEイメージで置き換えるにはどうすればよいですか？

Question

#site-titleテキストwith a fixed-size imageを置き換えることはできますが、問題はありません。

今は、Twenty ElevenのWordPresseのヘッダーのように、ブラウザのサイズに基づいて自動的にサイズを変更したいと考えています。

Firebugのは、そのための責任CSSがあることを私に伝えます：

#branding img { 
    height: auto; 
    margin-bottom: -7px; 
    width: 100%; 
} 

しかし、私は、サイトのタイトルにこれをコピーしてみてください：

#site-title { 
    text-indent: -9999px; 
    width: 100%; /* 980px; width of the image file. */ 
    height: auto; /* 128px; height of the image file. */ 

    margin: 0px 0 0 0; 
    padding: 0em 0 0; 
    background: url(images/header.png) white no-repeat; 
    font-size: 1px; 
    line-height: 1px; 
    text-decoration: none; 
} 

これは実際に動作しません。サイトを - タイトル画像は同じ元のサイズのままです。

新しいWordPressには「サイズ変更可能なマジック」機能を作成するために何か必要なことはありますか？

Answer 1

イメージのサイズを変更するには、親要素のサイズを変更する必要があります。あなたが21のテーマを取った場合、#page要素には最大幅がありますが、widthはありません。次に、画像のwidth:100%はブラウザの幅に従ってサイズを変更します。