【CSS】レスポンシブ化した際のパララックスの表示について

調べたものの一人で解決できなかったので、お力をお借りしたく思います。
初歩的なことでしたら大変申し訳ございませんが、ぜひともよろしくお願いいたします。

前提・実現したいこと

HTMLとCSSでパララックス風のレスポンシブWEBサイトを作成しています。
1つのCSSでブラウザを可変させてPC＞タブレット＞スマホ…と見せようとしています。

ひとつずつsectionで要素をくくり、sectionにクラスを与え、背景画像を設定。
PC…背景画像のやや上にテキストが乗る。
SP…背景画像の下にテキストを配置したい。

発生している問題・エラーメッセージ

PCではうまく配置できましたが、SP用ではうまく表示できません。
おそらく、sectionに背景を引いてるのでその分のmarginが取れてないものだと思います。

該当のソースコード

<section class="section">

        <div class="innner">

            <div class="txt">
                <h3><img src="../img/project/flower.jpg" alt="お花きれい。" /></h3>       
                <p>ここに本文がはいりますここに本文が入ります</p></div>
        </div>

    </section>

//CSS

.innner {
              width: 960px;
              margin: 20px 0 0 15%;
              }            

.innner {
              width: 960px;
              margin:20px 0 0 45%;
              }            

.txt{
              width: 600px;
              background: rgba(255,255,255,0.6);
              padding : 25px;
              box-shadow: 20px 20px 20px rgba(102,102,102,0.3);
              }


.section {
              width: 100%;
              height: 600px;
              padding:20px;
              margin: 60px 0;
              background:url(../img/project/raku_bg2.jpg) no-repeat left 0 fixed;        
              background-size: 55% auto;
              }


@media screen and (max-width:768px) {
.section {

              width: 100%;
              height: auto;
              background: url(img/flower.jpg) no-repeat fixed;
              background-size:contain;

              }            
}

試したこと

sectionに::beforeを加え、marginを作ろうと思いましたが、レイアウトが崩れてしまいます。

補足情報（FW/ツールのバージョンなど）

・使用ソフトはDreamweaverです。
まだローカル環境でしか扱っておらずテスト環境等のサーバーにはアップして確認していません。

yoshinavi

2018/11/03 23:40

＞PCではうまく配置できましたが･･･　→　提示のコードでPCの配置は合っていますか？各画像サイズも併せて記載してください。

famous

2018/11/05 07:20

レスありがとうございます。　画像サイズは1000 px ×685 px です。PCでは、（広めに要素が欲しく）height800pxです。スマートフォンでは画像全部を見せたいので、heightをauto、containにして全体表示したいと考えておりました。

yoshinavi

2018/11/05 07:54

h3にも画像がありますが「お花がきれい。」が画像なのですか？スマホだと「が」が無いのですが？画像であればこのサイズはいくつでしょうか？

famous

2018/11/05 09:17

ごめんなさい、photoshopで慌てて作ったもので…「が」が抜けていましたね！　見出しは画像を使っています。画像サイズは560px × 100px となります。。

行動規範の内容に同意します

回答2件

CSS
1@media screen and (max-width: 768px){
2  .section::before {
3    content:"";
4    display: block;
5    paddint-top: ●●%; /*写真と同じ比率になる%の値（写真の高さ÷幅×100）*/
6  }
7}

↑これで.sectionに写真と同じ比率の空白領域を設けてそのうしろに背景画像が配置
されるようにしたらどうでしょうか？

おそらく同じことをmarginでやろうとして失敗したのだと思いますが、
子要素（この場合::before疑似要素）につけたmarginは、
親要素自身にborderまたはpaddingが存在しない場合、親要素の外側に設定されてしまう仕様となっています。
レイアウトが崩れた原因はおそらくこれではないかと推測します。
なので、領域の「内側」に余白を確保したい場合はpaddingを使ってください。

投稿2018/11/03 13:33

aKusano

総合スコア3763

famous

2018/11/05 07:23

レスありがとうございます。試してみましたが、最初のsectionはだいぶテキスト部分が下に降りてくれましたが、テキスト内容が長いものと短いものがあり、二番目以降から崩れてきました。そもそも一番外側の要素に背景を設定したのが間違いなのでは…と思いつつ、考えてみます。

aKusano

2018/11/05 07:28

作り方はいろいろありますからね。外側の.sectionに直接背景画像を設定するより、写真を入れたい位置に空のdivを入れてそこに設定した方がまだ作りやすいかもしれませんね。まぁもっというと見せたい写真が単なるイメージ写真ではなく主たるコンテンツ情報なのであれば、背景画像ではなくimgでHTML上に埋め込むべきだったりするんですけどね。（そうするとまた作り方が変わってくるので今回は敢えてそうしろとは言いませんが）

famous

2018/11/05 09:21

お忙しいなかありがとうございます！空のdivタグ…という発想がなかったので、試してみます！

行動規範の内容に同意します