Wordpressのイメージを挿入する.cssので反応します

Question

私はWordpressのテーマにカスタムヘッダーを配置しようとしています。私はmain.cssとresponsive.cssをテーマフォルダから開いています。私は画像フォルダに画像を置く。今バナー/ヘッダは、ソリッドカラー2d2d2dであり、Iは、あるmain.cssにこのラインを見つけた

#main-menu { 
    float: left; 
    width: 100%; 
    background-color: #2D2D2D; 
    color: #666666; 
    padding: 0; 
} 

私のバナーは私が作った画像にフェードを作成するために同じ色（2d2d2d）を使用し、矩形であります。ウィンドウがフルスクリーンで開かれている場合は、画像が終わるところで背景色を見えるようにする必要があります。

は、私の知る限りだと、私はどこかを挿入するにはbackground: url(../images/banner104.png) no-repeat bottom right; を書かれました。私はどこを正確に把握することはできません。私はホームページを検査することはあなたにいくつかの手掛かりを与える場合のmain.cssに、これは

.main-menu ul li ul.sub-menu { 
    position: absolute; 
    top: 100%; 
    left: 1px; 
    z-index: 9999999; 
    min-width: 180px; 
    list-style: none; 
    font-size: 13px; 
    float: none; 

    display: block; 
    margin: 0; 
    margin-left: -5px; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    border: 0; 
    border-radius: 0; 
    background: url(../images/banner104.png) no-repeat bottom right; 
    display: none; 
    opacity: 0; 
    -webkit-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .02); 
    -moz-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .02); 
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .02); 
} 

ここに私のウェブサイトがあると動作しないことを知っています。 www.nationalcomicsnetwork.net

Answer 1

まず第一に：あなたの最初のコードショーメインメニュー要素のidと（#に注意）、およびクラスとして2番目のコード（.に注意してください）。多分それが原因だろうか？あなたが行ったように

#main-menu { 
    float: left; 
    width: 100%; 
    background-color: #2D2D2D; 
    color: #666666; 
    padding: 0; 

    /* new */ 
    background-image: url("../images/banner104.png"); 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    background-size: contain; 
} 

私も単色の背景色で1206x104pxするためにあなたのバナーをお勧めしません。同じよう#main-menuに直接画像を置くことについてどのように

。すでにpngファイルを使用している場合は、透明な背景を使用して、フェードアウトを実行するだけの幅にします。それ以外の場合は、特に小さい画面やブラウザの幅に応じて問題が発生する可能性があります。

---

あなたは直接のmain.cssを編集したり、カスタムCSSファイルを追加する場合、私は知らないので、私は、背景属性を分割。カスタム値を追加する場合は、背景の省略形を使用し、色の値を指定しないで、デフォルトの背景色を上書きしないでください。 あなたがあるmain.cssを編集する場合、直接あなたが速記を使用しますが、似た色の値を追加する必要がありますすることができます

background: #2D2D2D url("../images/banner104.png") no-repeat bottom right; 
background-size: contain;