• ベストアンサー

cssで

背景に別の画像を縦に並べる事は可能でしょうか。 同じ画像ならできるんですが、どうしても別の画像を縦に並べてみたいのでして、、、。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

 本来は、二つの画像を合成して一枚の画像として背景にするのが、背景という言葉の意味としては適切でしょう。二つの画像、すなわち二つの背景となると、その前景も二つであるならば、それぞれに背景を指定して内容の伸縮に合わせていくのが良いと思います。  ただ、全体を覆う背景の一部分に別の画像を載せたい場合には、:befor/:after擬似要素とcontentプロパティ、z\indexを組み合わせれば可能です。  CSS3では、background-image:<bg-image> [ , <bg-image> ]* となっていますから可能です。 →Image Sources: the ‘background-image’ property ( http://www.w3.org/TR/css3-background/#the-background-image )以降

gonshisan
質問者

お礼

皆さん、アドバイスありがとうございます。 最初に、背景を合成して、一枚にするやり方を試したのですが、どうしても画質が粗くなってしまい困っていました。 助かりました、ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • dscripty
  • ベストアンサー率51% (166/325)
回答No.2

http://www.w3.org/TR/css3-background/ CSS3 からできるらしいよ!

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

不可能です。 ですが単純に並べたい2つの画像を一つにすればいいだけの話です。

この投稿のマルチメディアは削除されているためご覧いただけません。
全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでセルの縦の指定が・・

    ロールオーバーすると背景画像が変わるメニューをスタイルシートで作っています。 背景画像は30×180で、セルの高さと幅も画像に合わせて30×180にしているつもりなのですが・・・ IE6で表示すると思うように出来ているのですが、Mozillaで表示すると縦が30pxより長いような気がします。 どのブラウザでも縦30pxに固定させるにはどうしたらよいのでしょうか。 色々調べたのですがお手上げです。 背景をリピートさせなければ、とりあえず見た目変 は解消できると気が付きましたが、それでは、納得できないので質問させていただきました。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • css

    プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上(0pxの高さ)から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。

  • CSSで横方向の可変ボックスの作り方

    [ ] ←画像(縦方向のグラデーション) [ テキスト ] [ テキストテキストテキスト ] 上記のようにテキストの量によって自動で背景画像が可変するような CSS指定をしたいのですが、これって可能でしょうか? 縦の可変はわかるのですが、横の可変がわかりません… すみませんが、わかるかたいましたらご教授お願いします。

  • CSSで、縦の高さを可変にする方法

    ┌───┐ │□□□│ │■●■│ │□□□│ └───┘ このような形のボックスがあり、●を囲む左右のボックス(■)に、背景画像を設定しております。 ●は毎回高さの値が変わる画像なのですが、 ┌───┐ │□□□│ │■●■│ │■●■│ │■●■│ │■●■│ │■●■│ │■●■│ │□□□│ └───┘ このように、●の高さによって、左右の■も縦に伸びるようにするにはどうしたらよいでしょうか? ■の部分のボックスのheightを、100%のリアクティブにしたり、Autoにしたりしても、 ┌───┐ │□□□│ │■●■│ │  ●  │ │  ●  │ │  ●  │ │  ●  │ │  ●  │ │□□□│ └───┘ このようになってしまい駄目でした。 どなたがご教授お願いします。

  • ブログのCSS編集で・・・

    ブログでCSS編集をしています(初心者です)。 bodyに背景画像を指定し、 記事部分(content)とサイドバー(link)にはその画像の色を薄くした別画像を入れたのですが(いったん#FFFで塗りつぶして、その上にbackground画像)、 contentとlinkの間にmarginがあるため、そのmaagin部分だけ背景ナシで真っ白になってしまうのです。 margin部分にも背景を入れるにはどうしたら良いでしょうか?m(_ _)m よろしくお願いします。

    • ベストアンサー
    • HTML
  • アメブロのCSS編集の質問です!

    アメブロのCSS編集の質問です! ブログ記事の表示数を「3つ」にしています。 1記事づつ背景(メインカラム)を切り離して見やすくしたい。 詳しいイメージは添付画像で確認お願いします。 . 画像添付を見て下さい! 私のブログと真似したいブログの記事背景です! 私のブログの場合、記事の背景(メインカラム)が繫がってるので 記事の区切りがつかず見づらいです! 真似したいブログは記事が終わると、 角丸で背景が切られているので区別がついて 別の記事が始まるのが明確にわかり易いです! <<CSSの書き方を教えて下さい>> 1、記事の背景(メインカラム)を角丸で切り離す事 2、記事間に一定のスペースを入れる事 私のブログです。宜しくお願い致します! ↓↓ ↓ 「猫の写真と動画で@癒されちゃうブログ♪」 http://ameblo.jp/perfect-airspook/

  • 24時間毎に外部cssの変更は可能ですか?

    Webサイトのテーマカラーを6色決めて、それぞれのカラーを24時間ごとに変えたいと思っています。 例えば今日は赤で、明日は青、のように変えていきたいのですが、 単純に背景色を変えるのではイメージが大きく変わってしまい、デザイン的におかしくなります。 いっそのこと思い切って、アイコンや画像もそれぞれのテーマカラー別に用意してしまおうと考えています。 そうなるとよくあるタイプの単純な画像・背景色の切替ではなく、テーマカラー別に6つのcssを用意して、24時間毎に切替るのが手っ取り早くて良いと考えています。 javascriptで例えば0~7時までは背景色や画像を入れ替える、 外部cssを入れ替える、というのは過去ログからもわかったのですが、 24時間毎に入れ替えるというのは可能なのでしょうか? javascriptの知識はまったくないため、大変申し訳ないのですが教えて頂けると大変助かります。 よろしくお願いいたします。

  • CSSについて

    スタイルシートで枠の背景の画像を設定できますが、通常の画像は出来るのでしょうか。また、リンクをそれで作る(CSSで管理する)ことが出来るのでしょうか。よく分かっていないので見当違いかもしれませんが、よろしくお願いします。

  • ブログのCSSについてですが・・・

    gooブログの、CSSについてなんですが、それで、背景とかを編集したいんですけど、どうやってやればいいんでしょうか?? いちお、ヘルプは読んだんですが、わかりません。 サイトさんを探して、使いたい画像は、決めてあるんですけど、その画像をどうやって、使えばいいのかわかりません。(背景に設定すればいいのか)誰か、分かるかた、お願いします。

  • CSSの設定でわからない箇所があります。

    CSSの設定でわからない箇所があります。 ベタ塗りの背景画像と本文エリアのページ両端をドロップシャドウ効果で 縦にリピートするライン画像の背景を使用したいのですが、 途中でドロップシャドウの線が止まってしまいます。 <body> <div id="wrapper"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div> </body> のように指定して、 body { background-image: url(img/back.gif); background-repeat: repeat; } と #wrapper { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(img/shadow.png); background-repeat: repeat-y; } のように設定しました。 そうすると、footerエリアは#wrapper内なので、 指定したドロップシャドウのラインの背景がブラウザ画面を拡大すると切れてしまいます。 ブラウザのサイズ、拡大縮小に関係なく、ページ最下部までドロップシャドウの背景を伸ばしたいです。 *back.gif=(ベタ塗り背景)。shadow.png=(ドロップシャドウ効果のライン)です。 それら背景をブラウザのサイズ関係なく最下層まで切れずに表示させたいです。(高さが50pixでも1000pixでも表示させたいです。) *ページは中央配置、横幅は固定、縦は各ページで成り行きにしたいです。 *現在背景は、ベタ塗りの背景画像と、ドロップシャドウ効果のラインの背景画像の2種を使用しています。設定方法、CSSの適用場所は選びません。 以上、ご教授下さい。 宜しくお願い致します。

このQ&Aのポイント
  • 20W AC充電器を使っていると、充電中に本体がかなり熱くなり、また、甲高い音が鳴ります。
  • このまま使い続けても大丈夫なのか、バッテリーにダメージは起こらないのか心配です。
  • エレコム株式会社の製品についての質問です。
回答を見る