２つの背景画像を用いたい

  • 解決済 vaio@

    (@vaio-1)


    13年、 7ヶ月前

    現在、1つの背景画像をつかっています。

    CSSでは下記の通りの記述です。

    body {
  color: #333;
  background:#f0f0f0 url(images/現在の背景画像) repeat;
  font-family: "Verdana", "Hiragino Kaku Gothic Pro", "MS PGothic", "Osaka",sans-serif;
  font-size:14px;
  line-height:135%;
}

    この現在の背景画像をそのまま残した状態で、新たに第2の背景画像を左側に装備したいと考えております。
    その場合、どこにどのような記述を用いれば宜しいでしょうか？

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • KKT

    (@kvex)

    13年、 7ヶ月前

    すみません。
    「左側」
    これだとご自分ではわかるでしょうが、見てる人はなんのことやらわかりません、もうちょっと説明して下さい。
    回答としては
    <div class="なんちゃら">～～～～</div>
    みたいな答えになるんだと思うのですが、とにかく何のことかわからないんです。

    トピック投稿者 vaio@

    (@vaio-1)

    13年、 7ヶ月前

    説明不足で申し訳ございません。

    左側というのは、たとえば

    body {
　　background: url(img/第二の画像) repeat-y fixed left top;
 }

    という感じで、現在の画像と共存させたいという事になります。

    第二の画像を有効にしようとすると、現在の画像が消えてしまって困っているという状況です。

    V.J.Catkick

    (@vjcatkick-1)

    13年、 7ヶ月前

    CSS3以降対応でよければ、カンマで区切れば複数表示出来ますが、透過処理とアルファチャンネルの知識がないとちょっと難しいかな。

    こことかに出てます。

    KKT

    (@kvex)

    13年、 7ヶ月前

    なるほど、じゃぁ、私の方からは入れ子の方法を。

    <body>
<div class="wrap">
ここにｗｅｂサイトの内容
</div>
</body>

    ということで、

    body {
  background:#f0f0f0 url(最初の背景) repeat;
}
.wrap {
  background: url(第２の背景) left repeat-y;
}

    普通のやりかたなので、こういう簡単なことを言ってるわけじゃないんですかね？

    トピック投稿者 vaio@

    (@vaio-1)

    13年、 7ヶ月前

    ご返信ありがとうございます。

    いや、おそらく簡単な事を私が理解出来ていないだけだと思います。

    <body>
<div class="wrap">
ここにｗｅｂサイトの内容
</div>
</body>

    は、どの部分に記述すれば宜しいのでしょうか？

    KKT

    (@kvex)

    13年、 7ヶ月前

    お使いのテーマがわからないのでなんとも。。。って部分もあるのですが。
    多くの場合、見ての通りの位置関係でいいと思います。

    <body～～
    という行があると思うので、その直後に
    <div class="wrap">

    つづいて、</body>という行があると思うので、その直前に
    </div>

    最後に、style.cssにスタイルを追加すればいいです。

    トピック投稿者 vaio@

    (@vaio-1)

    13年、 6ヶ月前

    ご回答ありがとうございます。

    kvexさまのご指摘の方法で、どうにか最初の画像を含め第二の画像も表示する事が出来ました。

    ただ、何故かコンテンツ部分が左に20pxほどずれてしまうという現象になりましたので、
    そこは、CSSでコンテンツのpaddingを左20px付加する事で正常に表示されるようになりました。

    このpadding付加の方法が正しい術かとうかはわかりませんが、どうにか思い通りの形にはなったかと思います。

    いろいろとありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「２つの背景画像を用いたい」には新たに返信することはできません。