No.1ベストアンサー
- 回答日時:
パララックスですね。
①css3だけでできるものと、②javascriptも併用してできるものがあります。また一番簡単に実装できる③パララックスっぽいものもあります。質問者さんの知りたいものは恐らくこれ③かと思います。
①,②の方法についてはcss3に対する知識やjavascriptの知識が必要となるのでここでは説明しません。
③は、bodyにbackground-position: fixed(こんなプロパティ名だったと思います。いつもショートハンドで書いてるので忘れました)で背景を当て、セクションごとにbackground-color: #fffなどと設定します。
するとbackground-colorを設定していないセクションだけにbodyの背景が見え、添付画像のような効果になります。
<body style="background: url(bg.png) fixed">
<div class="sec1" style="background-color: #fff">ここは白背景</div>
<div class="sec2">ここだけにbodyの背景が見える</div>
<div class="sec3" style="background-color: #fff">ここは白背景</div>
ただ、この場合sec2では左右いっぱいに背景画像が広がるので、基本的には添付画像のように左右に色は乗りません。解決方法としては例えばborder-widthを20pxなどをsec2につけるなどがあるかと思います。もう一つの解決方法として、bodyではなくsec1, sec3, あるいはその中の任意の要素にbackground-position: fixedを設定する方法もあります。しかしこの場合、モバイルブラウザではfixedが無効になります(モバイルではbodyに対するfixed以外は無視されます)。
一般的には②javascriptと併用するものが主流ですが、新しいブラウザに対応を限るのであれば①の方法でも可能です。
背景画像は主要なコンテンツではないので、個人的には①css3のみで実装、あるいはそれっぽくなればいいだけなら、ここで紹介した③の方法でもいいのではないかなとも思います。
この回答へのお礼
お礼日時:2015/10/14 13:48
とても参考になるご回答ありがとうございます!
「パララックス」という名称が分かっただけでも相当助かりました!
おっしゃる通りcss3やjavascriptの知識が乏しいので、③の方法であれこれ試してみたいと思います。
夜遅くに丁寧にご回答いただきましてありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
cssで背景画像をランダム表示する
-
htmlかcssで背景の白い枠をなく...
-
【CSS】【HTML】横並びメニュー...
-
ホームページの背景画像をパソ...
-
CSSで背景画像をランダムに表示...
-
background-sizeの背景で最小値...
-
楽天ショップのデザイン
-
background-sizeでcontainする...
-
javaスクリプトで背景画像をラ...
-
画像上に文字を表示するとiPhon...
-
before疑似要素で画像を指定し...
-
ヤフオクの商品説明欄に背景画...
-
スクロールバー
-
リストビューのTextBackground...
-
画像の並べかたを知りたい
-
テキストの横にアイコンを並べたい
-
「HTML(縦スクロールバー付)...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
IMGタグで画像の繰り返し使用は…
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
htmlかcssで背景の白い枠をなく...
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
LightBoxの矢印の出し方
-
コーディング中、右側に謎の余...
-
WEB上でディレクトリ内の画像を...
-
HP作成 作成した画像を動画の上...
-
ページごとに背景画像を変更し...
おすすめ情報