CSSで複数の背景画像を実装する方法

解決済

質問者：orodemwova
質問日時：2011/04/17 11:05
回答数：2件

いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。

添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。

自分が試した方法です。
html要素に左右に伸びるグラデーションを指定、body要素に赤丸のオブジェクトを指定。これでトップの背景は実装できました。body要素に追加で青丸のオブジェクトも指定してみましたが、画面を上方向にリサイズすると赤丸のオブジェクトの下に重なってしまします。青丸のオブジェクトは白い背景の部分だけでリピートさせ、画面をリサイズしても赤丸オブジェクトに重ならないようにしたいのですが、この場合どのように実装するのが理想でしょうか。よろしくお願いします。

html {
background: #F3F0E1 url(../img/share/bg_line.jpg) center top repeat-x;
}

body {
background: url(../img/share/bg_t.jpg) center top no-repeat,
url(../img/share/bg_m.jpg) center center repeat-y;
}

#wrapper {
margin:0 auto;
width: 960px;
background-color:#FFFFFF;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「LINE top」に関するQ&A：今まで同じだったLINEのTOP画をいきなり消す心理とは？

さらに表示

「シェアとは」に関するQ&A：「産廃カツ転売　無申請倉庫を調査シェア」このニュースや一連のニュース…、でコレラの実態と真実は…？

「CSS 画像」に関するQ&A： CSS 画像をたくさん並べたい時の方法

「CSS name」に関するQ&A： CSSで参照するID（or NAME）属性値の基本的な名称を教えていただけますか？

「LINE body」に関するQ&A：ゴシック&ロリータ　BODY　LINEについて

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sora1tora2
回答日時：2011/05/02 14:23

こんにちは

もう解決しているかもしれませんが、一応。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-16" />
<meta http-equiv="content-Language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<title>ホームページタイトル</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="discription" content="コンテンツの概要" />
<meta name="author" content="名前" />
<meta name="copyright" content="著作権" />
<style>
*{
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-image: url(フォルダ/ファイル.jpg) repeat-y top center;
}
#Top-bgimage{
width: 100%;
height: 200px;
background-image: url(フォルダ/ファイル.jpg) no-repeat top center;

}
#wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
top: 0;
}
#content {
margin:0 auto;
padding: 0;
width: 800px;
height: 100%;
background:white;
}
#footer {
width:100%;
height: 100px;
margin: 0;
padding: 0;
background:#000000;
text-align:center;
}
</style>
</head>
<body>
<div id="Top-bgimage"></div>
<div id="wrapper">
<div id="content">コンテンツ</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>

こんな感じです。参考になればいいのですが。

- 0
- 件

通報する

この回答へのお礼

急遽下方向へのリピートは辞めることになり無事納品することができました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。

ご丁寧にありがとうございました!!!

通報する

お礼日時：2011/05/08 01:02

No.1

回答者： naokita
回答日時：2011/04/18 15:17

画像の位置の発想を逆にすると・・・

１、グラデ画像と赤円（上画像）を一体化。
２、青円（下画像）を最背景にして、赤円（上画像）を被せる。
３、青円（下画像）は最背景で全面縦リピートするが、
　赤円（上画像）とfooterで隠れて見えなくなるから、
　header画像の真下からfooterの手前までしか伸びていないように見える。
------------------

body { margin:0; padding:0;
background:#E4E4E4 url(下画像.gif) 50% ●px repeat-y;}
#body2 {
background: url(上画像.gif) 50% 0 repeat-x;}
#wrapper {
margin:0 auto; width: 960px; background:white;}
#footer {
background:#E4E4E4 url(上画像.gif) 50% 100%;
width:100%; text-align:center;}

<body>
<div id="body2">
<div id="wrapper">コンテンツ</div>
<div id="footer"><p>footer</p></div>
</div>
</body>

- 0
- 件

通報する

この回答へのお礼

今回は下方向へのリピートは辞めることにしました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。

ありがとうございました!!!

通報する

お礼日時：2011/05/08 01:01

このQ&Aに関連する人気のQ&A

「シェアとは」に関するQ&A：共有フォルダー内の一部が見えない

さらに表示

「LINE top」に関するQ&A：元カレのSNSのトップ画像について

「LINE body」に関するQ&A： OutLook本文を、VBAでExcelに落としたい

「CSS name」に関するQ&A： inputタグのテキストBOXだけ右寄せにする方法

「CSS 画像」に関するQ&A： CSSで指定した背景画像にリンクエリアを設定する方法。

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qかわいい無料素材サイトを教えてください

フェアリー系、パステル系、ネオン系、80ｓrockの無料素材サイトを教えてください！！

背景画、デコメもあると嬉しいです♪

Aベストアンサー

無料でデコメから動く待ち受け合成や自分で作れるデコメ作成アプリなど何でもあります。メール送受信画像が作れたり、顔文字辞典、セリフ画、など無料とは思えないくらいの機能が揃ってます。
マイページには自分が作った画像が保存できます。

無料版
http://m.gal-deco.com/

公式サイトの方はもっと凄いです。
どちらを選択するかはおまかせします。
公式サイト
http://gal-deco.com/

参考URL：http://gal-deco.com/

他の回答も見る

Qcss 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（

css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。）

現在、Kompozerをつかってホームページを作成しています。
添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。
現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。

あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。
ご指導いただければうれしいです。
よろしくお願いします。

＊ソース

<html><head>

...続きを読む

Aベストアンサー

よくわかんないけど…

こんな雰囲気？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#wrapper {
width: 450px;
margin: 0 auto;
padding: 10px;
text-align: center;
background-image: url(back.jpg);
}
#wrapper .top {
width: 300px;
height:100px;
margin: 5px;
}
#wrapper p img {
width: 92px;
height: 230px;
margin: 5px;
border: 0;
}
</style>
</head>
<bo...続きを読む

他の回答も見る

Q音符や五線譜などの無料素材

年賀状の背景として簡単な五線譜と音符を使用したデザインを考えているのですが、無料素材のサイトがありましたら教えてください。

Aベストアンサー

参考ＵＲＬをどうぞ。

参考URL：http://www.t-susa.com/material/notes/

他の回答も見る

Q背景ではなく、img srcをCSSで実装するには

背景ではなく、img srcタグをCSSで実装したいです。
どうやればいいでしょうか？

Aベストアンサー

ロールオーバー目的でしたら、なおさら背景が簡単だと思います。メニューですと、文章構造的には箇条書きリストになると思います。
html
<ul class="nav">
<li><a href="test.html">test</a></li><li><a href="test2.html">test2</a></li><li><a href="test3.html" class="only">test3</a></li><li><a href="test4.html">test4</a></li>
</ul>

ｃｓｓ
.nav li{width:100px;line-height:30px;list-style:none;}
.nav li a{display:block;text-align:center;text-decoration: none;color:#ffffff;}
.nav li a:link{...続きを読む

他の回答も見る

Q無料素材を使って年賀状を印刷

無料素材を名前をつけて保存して・・・と言うやり方を書いてるんですが、とりこめてはいるんですが印刷ができません。
無料素材を印刷するにはどうしたらいいんでしょうか？

Aベストアンサー

＞無料素材を名前をつけて保存して・・・
の保存したフォルダ（ディクトリ）先はどこですか？年賀状ソフトと同じフォルダにインストールされましたか。でないと、保存したそのフォルダを表示して、印刷したい素材を右クリックし、コピー＆ペーストすれば、今作成している年賀状に表示されて、印刷が可能かと。。

他の回答も見る

QCSS/背景画使用時のメインコンテナ左右のデザイン

タイトルが不明瞭で申し訳ありません。

添付画像を見ていただくと分かるかと思うのですが、
背景が無地ではなく、画像を使用している場合に
メインコンテナーの左右に画像のような効果を付けたい場合は
左右部分に使用する背景用画像を透過し、pngで保存して使用すれば
いいのでしょうか？
単にシャドーをつけるのではなく、こういった紙をちぎったような効果を出したいのですが…。

IEで透過は見れないなどと色んな所で見たのですが
一般的にpngの透過画像は使わない方が良いのでしょうか？
初心者故おかしなことを言っていたらすみません…。

添付画のようなデザインにするには
どのような方法があるのかご助言を頂けたら幸いでございます。
宜しくお願いします。

※添付画のサイトは現在工事中のようで、ソースが見れませんでした。

Aベストアンサー

2枚の画像(gifでも pngでも)を、重ね合わせて
背景表示しているんだと思いますよ。

body{background:url(下の背景画像 2000pxくらい × 高さはご自由);}
.wrap{background:url(コンテンツの背景画像コンテンツの幅 × 高さは自由)で背景画像を真ん中に設置;}

他の回答も見る

Qバザーの食券を無料素材で作りたい

金額、日付を入れた食券を作りたいのですが、無料素材で自由に書き込めて、食券として使えるものはないでしょうか？

Aベストアンサー

勘違いならごめんなさい。
無料素材って材質そのものじゃなくて、デザインイラストなどの事を言ってるんじゃないかと思い、お答えします。
HP用無料素材のページの中には、多少のデザイン変更を認めている所があります。以下に私がよく利用するサイト（下記URL)でも確かできたと思います。ただ、商用利用の場合は注意が必要で、バザーと言えどお金を受け取る以上は、要確認かと思います。
あと、書店でイラスト集なども売っています。CD-ROMもあるかと思います。これらもチェックしてみてはいかがでしょうか？
ただし、いずれの場合も画像を加工するためのソフトが必要になりますね。ただ切り貼りなら別ですが。

参考URL：http://www.milkcafe.com/~puff/

他の回答も見る

Q背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。

【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。
4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。

【現状】
1,2,4は出来ています。
ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。

【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper_index_up">
<div id="header">ヘッダー</div>
</div>
<div id="top_img_wrapper">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" />
</div>
<div id="wrapper_index_bottom">
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

どうかよろしくお願いします。

Aベストアンサー

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ（画面）に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。
まずは下記のサンプルを試してみて下さい。
----------------------------------------------------------------------
【修正版サンプル(2)】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">

</style>
</head>
<body>

<div id="wrapper_index_up">
（wrapper_index_upの領域　ここから）
<div id="header">ヘッダー</div>
（wrapper_index_upの領域　ここまで）
</div>

<div id="top_img_wrapper">
（top_img_wrapperの領域　ここから）
<div id="top_img"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="中央固定表示させる画像X" width="139" height="92" /></div>
<p class="hoge">top_img_wrapper内で画像Xの下に表示する最初の子要素（テキストなど）</p>
（top_img_wrapperの領域　ここまで）
</div>

<div id="wrapper_index_bottom">
（wrapper_index_bottomの領域　ここから）
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
（wrapper_index_bottomの領域　ここまで）
</div>

</body>
</html>
----------------------------------------------------------------------
前回のサンプルからの修正点は以下のみです。

【1】背景画像を指定する#top_img_wrapperとは別個に、中央固定表示画像を挿入する為だけのブロック#top_imgを追加。
【2】#top_img内で、画像Xをbodyに対しての絶対配置として指定。（ここの手法については参考サイトにポイントの解説が載っているので各プロパティの設定の理屈は省略します）

これで#top_img_wrapperの位置や幅とは関係なく、#top_imgは常に画面の左上を基点とした絶対配置になる為、水平方向はウィンドウ幅に対して常にセンタリングされる事になります。ただし、質問者様の場合は参考サイトと違って、画像Xの上下にヘッダー・コンテンツ・フッターというブロックが存在していますから、それらと、画像Xが（参考サイトの様に制限なく）重なってしまっては困るのでは？現に、上記サンプルでは、垂直方向に対する絶対位置を0にしてしまっているので、画面の上端にくっついてしまい、ヘッダーの上に画像Xが重なってしまう状態になっています。

これらを回避する為には、更にいくつかの条件を明確にして頂く必要があります。

(1)#top_imgの描画開始位置は、上からどれだけの位置にあればよいのか？例えば、ヘッダーを収める#wrapper_index_upの高さが50pxと決まっており、画像Xはそのすぐ下に、という事であれば、topプロパティの位置を指定する。
#wrapper_index_up {
height: 50px;
}
#top_img {
top: 50px;←修正
}
(2)#top_img_wrapperに表示させたい要素は、実は背景画像しかないのか？そうであれば、背景画像の全体像が必ず描画される様に、#top_img_wrapperに背景画像と同じ高さを指定しておく必要がある。例えば質問文中のソースの実寸通りであれば、下記の様に。
#top_img_wrapper {
height: 92px;←追加
}
(3)(2)と違い、#top_img_wrapperにはテキストなどの子要素があり、画像Xの下から表示させたい、というのであれば、#top_img_wrapperの高さの確保を最低92px以上に変更した上で、#top_img_wrapperの中で画像Xの下に配置する要素にはmargin-topなどで画像X分の余白を上方向に取ってから描画を開始する様にする。
#top_img_wrapper {
min-height: 92px;←追加
_height: 92px;←min-heightが無効なIE6用ハック
}
#top_img_wrapper p.hoge {
margin: 92px 0 0 0;
}

…という感じですが。いかがでしょうか。

他の回答も見る

QアニメーションGIF素材の無料素材集サイトを教えて下さい。

アニメーションGIFの無料素材がダウンロードできるホームページを教えて下さい。

特に、犬とか猫の動物素材があるとうれしいです。

windows用です。

よろしくお願いします。

Aベストアンサー

動物素材、猫素材、犬素材などで検索すると色々出てきますよ。
あと、
動物素材を配布している素材屋さんのランキングです。
http://www.sozaiyasan.com/cgi-bin/ani/ranklink.cgi
個人的に好きな素材サーチサイトは
http://www.sozai-r.jp/
と
http://www.hisas.jp/
カテゴリ分けされているので、
見やすいしきっとお気に入りのサイトが見つかると思いますよ。
もちろん動物もののカテゴリもあります。

他の回答も見る

Qリンク画像をCSSを使って背景画像にするメリット

リンク画像をCSSで設定するメリットは何ですか？

左上の「OKwave」のロゴマークもそうですが、なぜHTML言語のimgタグとaタグの組み合わせで、リンクを作っていないのでしょうか？
CSSで画像を背景画像として設定するメリットは何なのでしょうか？

すいません、ご教示願います。

Aベストアンサー

＞imgタグとaタグの組み合わせで、リンクを作っていないのでしょうか？
　一言で言うと「その画像は文書構造には無関係な背景だから」です。
　説明すれば長くなりますが、そもそもHTMLの最大の目的は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　ですね。ウェブページにアクセスするユーザーエージェントは、上記の例に加えて検索エンジンも含まれますが、画像が負担になる携帯電話などの帯域の狭いものもいます。画像の絵柄の意味を理解できるのは人だけです。人意外も訪問する・・

　それ以外にも随所に
「文書構造とプレゼンテーションとのより明解な区別。従って、プレゼンテーション目的の場合HTMLの要素や属性ではなくスタイルシートの使用を奨励する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )」
「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のはまずい」
「HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」

　たとえば、
<a href="htt://hge.com"><span>ほげ</span></a>
　と書かれていれば、スタイルシートで
a[href="htt://hge.com"]{background:url()****}
a[href="htt://hge.com"] span{display:none;}
　とすれば、携帯電話や検索エンジン、点字端末や読み上げソフトは率直にテキストとして理解します。また、さきでデザインを変えようとしたときにHTMLを書き換える必要もありませんね。

　リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。その場合でも、altにはきちんと代替文字を帰すべきですし、マークアップがナビゲーションリストのひとつでしたら、<div class="nav></div>(HTML4.01)、<nav></nav>(HTML5)で括るべきです。
　後者の場合も、
<div class="nav">
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
</div>
としかマークアップしないことが圧倒的に多いです。私は・・
　だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。