質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

background-imageが反映されません

受付中

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 1,211

score 27

cssにbackground-imageをbody内に設定したのですが反映されません。
特にnav id="fh5co-main-nav"に背景画像が反映されないのが全く分からず、画像が入っているimagesの場所も指定はできています。
ご教授お願いいたします。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Minimal &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
    <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
    <meta name="author" content="FREEHTML5.CO" />

  <!--
    //////////////////////////////////////////////////////

    FREE HTML5 TEMPLATE
    DESIGNED & DEVELOPED by FREEHTML5.CO

    Website:         http://freehtml5.co/
    Email:             info@freehtml5.co
    Twitter:         http://twitter.com/fh5co
    Facebook:         https://www.facebook.com/fh5co

    //////////////////////////////////////////////////////
     -->

      <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">

    <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">

    <!-- Animate.css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="css/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- Flexslider  -->
    <link rel="stylesheet" href="css/flexslider.css">

    <link rel="stylesheet" href="css/style.css">


    <!-- Modernizr JS -->
    <script src="js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    </head>
    <body>

    <nav id="fh5co-main-nav" role="navigation">
        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle active"><i></i></a>
        <div class="js-fullheight fh5co-table">
            <div class="fh5co-table-cell js-fullheight">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="work.html">Profile</a></li>
                    <li><a href="product.html">News</a></li>
                    <li><a href="about.html">Shop</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
                <p class="fh5co-social-icon">
                    <a href="#"><i class="icon-twitter2"></i></a>
                    <a href="#"><i class="icon-user"></i></a>
                    <a href="#"><i class="icon-youtube"></i></a>
                </p>
            </div>
        </div>
    </nav>

    <div id="fh5co-page">
        <header>
            <div class="container">
                <div class="fh5co-navbar-brand">
                    <h1 class="text-left"><a class="fh5co-logo" href="index.html">PIONEA</a></h1>
                    <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                </div>
            </div>
        </header>

        <aside id="fh5co-hero" class="js-fullheight">
            <div class="flexslider js-fullheight">
                <ul class="slides">
                   <li style="background-image: url(images/plini.jpg);">
                       <div class="overlay-gradient"></div>
                       <div class="container">
                           <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text">
                               <div class="slider-text-inner">
                                   <h2>Create A Motivational Template</h2>
                                   <span>Branding</span>
                               </div>
                           </div>
                       </div>
                   </li>
                   <li style="background-image: url(images/plini.jpg);">
                       <div class="overlay-gradient"></div>
                       <div class="container">
                           <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text">
                               <div class="slider-text-inner">
                                   <h2>Start Practicing Your Course</h2>
                                   <span>Website</span>
                               </div>
                           </div>
                       </div>
                   </li>
                   <li style="background-image: url(images/plini.jpg);">
                       <div class="overlay-gradient"></div>
                       <div class="container">
                           <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text">
                               <div class="slider-text-inner">
                                   <h2>Start Practicing Your Course</h2>
                                   <span>Products</span>
                               </div>
                           </div>
                       </div>
                   </li>
                </ul>
              </div>
        </aside>

        <footer>
            <div id="footer">
                <div class="container">


                    <div class="row copy-right">
                        <div class="col-md-6 col-md-offset-3 text-center">
                            <p class="fh5co-social-icon">
                                <a href="#"><i class="icon-twitter2"></i></a>
                                <a href="#"><i class="icon-user"></i></a>
                                <a href="#"><i class="icon-youtube"></i></a>
                            </p>

                            <!--ここのspanは数字のアニメーションを設定-->
                            <p>
                                © <span class="fh5co-counter js-counter" data-from="0" data-to="2018" data-speed="5000" data-refresh-interval="50">
                                </span>
                                    @PIONEA_jpn
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

    </div>

    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- jQuery Easing -->
    <script src="js/jquery.easing.1.3.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Waypoints -->
    <script src="js/jquery.waypoints.min.js"></script>
    <!-- Counters -->
    <script src="js/jquery.countTo.js"></script>
    <!-- Flexslider -->
    <script src="js/jquery.flexslider-min.js"></script>

    <!-- Main JS -->
    <script src="js/main.js"></script>

    </body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/04/02 15:33

    important指定を入れるとどうなりますか? 例:background-image: url(images/plini.jpg) !important;

    キャンセル

  • sutosi

    2018/04/02 15:39

    うまくいきませんでした..また別のbodyタグに背景が指定されていたんで削除して試してみたのですがそれもうまくいきませんでした

    キャンセル

  • m.ts10806

    2018/04/02 16:28

    bodyタグの背景の指定は今回当てたい箇所には影響ないはずです。例えばli全体に対して!important指定で設定があるとか、の場合は影響があります。やはり画像のパスが間違っているのではないでしょうか。相対パスで書かれているのようなので、ひとまずhttpから始まる絶対パスを入れてみて表示されたらパスが違うということなので、実行しているファイルからの相対パスを改めて設定しなおすと良いです。

    キャンセル

回答 4

+1

CSS がキチンと意図した通りあたっているか?
画像ファイルが読めているか?

いずれも、ブラウザの開発ツールで確認すると簡単にわかります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/02 15:42

    他の箇所にも画像を指定しているのですがそちらはうまく表示されました!

    キャンセル

0

その場所に画像が適切に配置されていれば、

・外部CSSのその箇所に、!importantbackground が指定されている可能性があります。
・元のサイズが大きく、その要素内におさまりきっていない場合、background-size: contain;もしくはサイズ固定で指定することで、見えるようになるかもしれません。(あとbackground-positionとか)

まず開発ツールで、その画像がnot foundになっていないかを確認する必要がありますね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/02 17:37

    コード自体が1万文字で質問文に乗せられないんですよね..もともとテンプレートを元にいじっています
    visibility: hidden;を削除してもときに表示はされませんでした

    キャンセル

  • 2018/04/02 17:49

    全てを載せる必要は無く、該当箇所のみで良いと思いますが、デベロッパーツールでの確認等はどうですか?
    単純にbodyやnav部分に画像でなく背景色を#000や#fffで指定しても変わらないのでしょうか?

    キャンセル

  • 2018/04/02 17:55

    ここは「kszk311」さんのコメント欄なので、私のここでの意見はこれで控えさせて頂きます。

    試したことが他にあれば、質問文に編集して記述してもらえれば、他の方からも回答を得られやすくなると思います。

    キャンセル

0

少し気になる部分として推測でしかありませんが、CSS内のコメントの終わらせ方で「*/」の前に半角文字や半角スペース以外の全角文字で終わっている所が見られます。この場合、次の正しい終わらせ方のところまで、CSSが効かない場合があります。

確認してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

widthで対象の画像に適当に幅をつけてあげるとどうですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る