Q&A
（質問は編集できます）
ファイルが違うのでしたらコードブロックはわけてください。
あと、コードが非常に長くて問題切り分けが難しくなっていると思います。
もっと最小構成のコードで試してみてください。
前提・実現したいこと
デイトラの課題でBootstorap編の動画②をしています。
background-imageの設定をページの上下にしなくてはいけないのですが、
１枚目は出来たのですが２枚目を設定すると１枚目も２枚目と同じ画像に変わってしまいます。
どなかご教授ください。
発生している問題
background-imageの１枚目が２枚目と同じになってしまう
### 該当のソースコード <!---Start Landing Page section--> <div class="landing"> <div clss="home-wrap"> <div class="home-inner"> </div> </div> </div> <div class="caption text-center"> <h1>Welcome to Nuno</h1> <h3>Udemy Bootstrap 4 Course</h3> <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a> </div> <!---End Start Landing Page section--> </div> <!----End Home Section--> <!---Start Course Section--> <div id="course" class="offset"> <div class="col-12 narrow text-center bg-white"> <h1>Nuno theme Advanced Bootstrap Course</h1> <p class="lead">Learn Bootstrap by creating an advanced Bootstrap 4 Responsive Website Template from scratch, with no steps skipped!</p> <a class="btn btn-secondary btn-md" href="#" target="_blank">Bootstrap Course</a> </div> </div> <!----End Course Section--> <!---Start Features Section--> <div id="features" class="offset"> <!---start jumbotron--> <div class="jumbotron"> <div class="narrow text-center"> <div class="col-12"> <h3 class="heading">FEATURES</h3> <div class="heading-underline"></div> </div> <div class="row text-center"> <div class="col-md-4"> <div class="feature"> <i class="fas fa-play-circle fa-4x" data-fa-transform="shrink-3 up-5"></i> </div> <h3>Custom Animation</h3> <p>Animation css and Waypoints.js allow for smooth Animations scrolling down the site.</p> </div> <div class="col-md-4"> <div class="feature"> <i class="fas fa-sliders-h fa-4x" data-fa-transform="shrink-4.5 up-4.5"></i> <h3>Contens Slider</h3> <p>Owl.carousel.js makes navigating contens sliders seamless with it's content carousel Navigation </p> </div> </div> <div class="col-md-4"> <div class="feature"> <i class="fab fa-wpforms fa-4x" data-fa-transform="shrink-4 up-5"></i> <h3>Contact Form</h3> <p>The Bootstrap HTML form will send directly to your email address using PHPMailer.php </p> </div> </div> </div><!--End row--> </div><!---End Narrow--> </div><!---End jumbotron--> </div> <!----End Features Section--> <!---Start Resources Section--> <div id="resources" class="offset"> <div class="fixed-background"> <div class="row dark text-center"> <div class="col-12"> <h3 class="heading">Built with Care</h3> <div class="heading-underline"></div> </div> <div class="col-md-4"> <h3>HTML 5</h3> <div class="feature"> <i class="fas fa-code fa-3x"></i> </div> <p class="lead">Built with the latest,HTML 5.</p> </div> <div class="col-md-4"> <h3>Bootstrap 4</h3> <div class="feature"> <i class="fas fa-bold fa-3x"></i> </div> <p class="lead">Built with the latest,Bootstrap 4.</p> </div> <div class="col-md-4"> <h3>CSS 3</h3> <div class="feature"> <i class="fab fa-css3 fa-3x"></i> </div> <p class="lead">Built with the latest,CSS 3.</p> </div> </div> <!--End row dark--> </div> <!--End fixed background--> <div clss="fixed-wrap"> <div class="fixed"> </div> </div> </div> <!----End Resources Section--> <!---Start Clients Section--> <div id="clients" class="offset"> <!---Start Jumbotron--> <div class="jumbotron"> <div class="col-12 text-center"> <h3 class="heading">Clients</h3> <div class="heading-underline"></div> </div> <div class="row"> <div class="col-md-6 clients"> <dic class="row"> <div class="col-md-4"> <img src="img/client1.png"> </div> <div class="col-md-8"> <blockquote> <i class="fas fa-quote-left"></i> I see Nuno support as more of a partner to my company than a resource. I can pick up the phone and talk to anyone at any time and the way that they interact with us as a business makes it really simple. <hr class="clients-hr"> <cite>— Eric,small Business owner</cite> </blockquote> </div> </dic> </div> <div class="col-md-6 clients"> <dic class="row"> <div class="col-md-4"> <img src="img/client2.png"> </div> <div class="col-md-8"> <blockquote> <i class="fas fa-quote-left"></i> I see Nuno support as more of a partner to my company than a resource. I can pick up the phone and talk to anyone at any time and the way that they interact with us as a business makes it really simple. <hr class="clients-hr"> <cite>— Rachel,Professional Photographer</cite> </blockquote> </div> </dic> </div> </div><!--End row--> </div><!--End jumbotron--> <div class="col-12 narrow text-center"> <p class="lead">Want to learn more about developing Bootstrap Themes?</p> <a class="btn btn-secondary btn-md" href="#" target="_blank">Bootstrap Course</a> </div> </div> <!----End Clients Section--> <!---Start Contact Section--> <div id="contact" class="offset"> <footer> <div class="row justify-content-center"> <div class="col-md-5 text-center"> <img src="img/nuno.png"> <p>At our core is collection of design and development solutions that represent everything your business needs to compete in the modern marketplace.</p> <strong>Contact Info</strong> <p>(888)888-8888<br>email@nuno.com</p> <a href="#" target="_blank"><i class="fab fa-facebook-square"></i></a> <a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a> <a href="#" target="_blank"><i class="fab fa-instagram"></i></a> </div> <hr class="socket"> © Nuno Theme. </div> </footer> </div> <!----End Contact Section--> <!--- Script Source Files --> <script src="js/jquery-3.3.1.min.js"></script> <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script> <!--- End of Script Source Files --> </body> </html> CSS @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); body{ overflow-x: hidden; font-family:'Lato', sans-serif; color: #505962; } .offset::before{ display: block; content: ""; height: 4rem; margin-top: -4rem; } /*---Navigation---*/ .navbar{ text-transform: uppercase; font-weight: 700; font-size: .9rem; letter-spacing: .1rem; background: rgba(0,0,0,0.6)!important; } .navbar-brand img{ height: 2rem; } .navbar-nav li{ padding-right: .7rem; } .navbar-dark .navbar-nav .nav-link{ color: white; padding-top: .8rem; } .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover{ color: #1ebba3; } /*--- Landing page----*/ .home-inner{ background-image: url(img/computers.png); } .caption{ width: 100%; max-width: 100%; position: absolute; top: 38%; z-index: 1; color: white; text-transform: uppercase; } .caption h1{ font-size: 3.8rem; font-weight: 700; letter-spacing: .3rem; text-shadow: .1rem .1rem .8rem black; padding-bottom: 1rem; } .caption h3{ font-size: 2rem; text-shadow: .1rem 1rem .5rem black; padding-bottom: 1.6rem; } btn-lg{ border-width: medium; border-radius: 0; padding: .6rem 1.3rem; font-size: 1.1rem; } /*---Course Section --*/ .narrow{ width: 100%; margin: 0rem auto; padding-top: 2rem; } .narrow h1{ font-size: 2.4rem; } .btn-secondary{ border-width: medium; border-radius: 0; text-transform: uppercase; font-size: 1.2rem; padding: .6rem 1.2rem; margin: 1rem; color: white; background-color: #1ebba3; border-color: #1ebba3; } .btn-secondary:hover{ background-color: #189582; border-color: #189582; } /*---feature section---*/ .jumbotron{ margin-bottom: 0; padding: 2rem 0 3.5rem; border-radius: 0; } h3.heading{ font-size: 1.9rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1.9rem; } .heading-underline{ width: 3rem; height: .2rem; background-color: #1ebba3; margin: 0 auto 2rem; } .feature svg.svg-inline--fa{ color: #1ebba3; } .feature h3{ font-size: 1.3rem; text-transform: uppercase; padding-bottom: .4rem; } .feature p{ font-size: 1.1rem; } /*---Resources Section --*/ .fixed{ background-image: url(img/apple.png); z-index: -1; } .dark{ background-color: rgba(0,0,0,0.7); color: white; padding: 7rem 2rem; } .fixed-background h3{ } .fixed-background p{ } /*============ BOOTSTRAP BREAK POINTS: Extra small (xs) devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap Small (sm) devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } Medium (md) devices (tablets, 768px and up) @media (min-width: 768px) { ... } Large (lg) devices (desktops, 992px and up) @media (min-width: 992px) { ... } Extra (xl) large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } =============*/ ```ここに言語名を入力 HTML CSS Bootstrap ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
考察、ありがとうございました。
最小構成コードすら分からない勉強中の身ですので、
そのまま張り付けておりましたが、無事解決までいけました。
>最小構成コードすら
「問題が再現する」が前提の、本当に必要なところだけ切り出したコードです。
ここまでhtmlもcssがなくてもやりたいことに関係ある部分で事足りるわけですから、改めてそこだけ切り出して作ると良いです。
一部分にフォーカスすることになるので構文やタイプミスにも気づきやすくなります
あと、最所に書いたように「質問は編集できます」ので、せめて別ファイルは別コードブロックにするように調整いただけませんか？
回答1件
0
ベストアンサー
###回答
タイプミスをいくつか発見しました。
1つ目：<div clss="home-wrap"> ➡class
２つ目：<div clss="fixed-wrap"> ➡class
３つ目：<dic class="row"> ➡div ※4箇所
以上
投稿2019/12/15 05:56
総合スコア640
ありがとうございます！
無事、解決致しました！
全然自分では気が付きませんでした・・
入力補完してくれるEmmetを使えばタグのタイプミスはなくなると思います。
使われていないのであれば、使った方がいいと思います。勉強段階から慣れるためにも！頑張ってください！
あなたの回答
tips
プレビュー
