サポート » 使い方全般 » タイトルの背景に画像を配置したい

  • テーマはtwenty twelveです。
    ヘッダー画像設定だと、ナビゲーションメニューの下に画像が配置されます。
    それではなくて、タイトルの背景に画像を配置したいのですが、どうやったら画像をタイトルの背景に配置できますか?

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • 追加CSSで

    .site-header h1{background-image: url(画像のアドレス);}

    これでいけると思います。
    参考まで。

    スレッド開始 damian5129

    (@damian5129)

    今やりましたが、写真が一部しか表示されません。写真の上部が表示されます。

    スレッド開始 damian5129

    (@damian5129)

    写真のサイズを指定して写真全体を表示させることは出来ますか?

    タイトルの背景の背景の部分なので、当然ながらタイトルの文字数やサイズなどによってその部分の大きさが変化します。
    無理矢理するとすれば、サイズ(widthやheight)を与えてあげればいけると思います。
    そのへんは、ブラウザのデベロッパーツールを使いながらやればよくわかると思います。

    スレッド開始 damian5129

    (@damian5129)

    無理矢理で画像全体を表示させたいです。
    widthを使っても画像全体を表示出来ません。

    ちなみに画像のサイズはいくつですか?

    そもそも、twenty twelveのデフォルトで設定がしてあるので、
    その画像が表示できるように対症療法で変更していっても、他のところも変更しなければいけなくなって、
    支障が出てくると思います。

    もう一度書きますが、、ブラウザのデベロッパーツールを使って構造とか理解しながらやられた方がいいと思いますよ。

    スレッド開始 damian5129

    (@damian5129)

    twenty twelveのヘッダー画像と同じサイズです

    960 × 250 ですか?

    .site-header h1{
     width: 960px;
     height: 250px;
     background-image: url(画像のアドレス);}

    これで入ると思います。

    スレッド開始 damian5129

    (@damian5129)

    今実行しました。
    確かに表示されましたが、写真の上部しか表示されませんでした。
    写真全体を表示したいです。
    また、このコードを使うと、キャッチフレーズとタイトルが離れてしまいます。

    >写真の上部しか表示されませんでした

    そうですか、
    こちらの環境では表示されています。

    >キャッチフレーズとタイトルが離れてしまいます

    どうデザインされたいか、わたしにはわからないので……、
    その辺は考慮せずに書かせていただきました。

    お役に立てずに申し訳ありません。

    こんにちは、

    画像の一部が表示されているなら

    
    .site-header h1{
        height: 0;
        background: url(画像URI);
        padding-bottom: 20%;
        background-size: contain;
        background-repeat: no-repeat;
    }
    

    スタイルの要所

    padding-bottom の値の計算方法

    (画像の高さ / 画像の幅)* 100 した値にパーセントを付けてみてください 

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「タイトルの背景に画像を配置したい」には新たに返信することはできません。