Bootstrap4を使用したサイトの、トップページに背景画像を使用中です。
<!doctype html> <html lang="ja"> <head> <title>タイトル</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <style type="text/css"> <!-- .jumbotron{ background: url("material/background.GIF") no-repeat center center; } --> </style> <body> <div class="container"> <div class="row bg-primary"> <div class="col-md-1"> <a name="top" href="index.html"><img class="float-left mt-1" src="material/logo.GIF" alt="ロゴ"></a> </div> <div class="col-md-11"> <h1 class="text-white ml-3">タイトル</h1> <p class="text-white text-right" >サブタイトル</p> </div> </div> <div class="row"> <div class="col-md-3"> <div class="btn-group-vertical btn-sm btn-block"> <div class="dropdown btn-block"> <a class="btn btn-outline-primary btn-sm btn-block" href="index.html">ホーム</a> <a class="btn btn-primary btn-sm btn-block" href="main/index.html">メイン</a> <a class="btn btn-primary dropdown-toggle btn-sm btn-block" id="dropdown4" data-toggle="dropdown" href="#">ドロップダウンメニュー4</a> <div class="dropdown-menu btn-primary btn-block" aria-labelledby="dropdown4"> <a class="dropdown-item" href="dropdown4/index.html">ドロップダウンメニュー4-1</a> <a class="dropdown-item" href="dropdown4/sub.html">ドロップダウンメニュー4-2</a> </div> </div> </div> </div> <div class="tate col-lg-9"> <div class="jumbotron"> <h3>本文</h3> <p class="col-md-2">文章</p> </div> </div> </div> <a class="badge badge-primary" href="#top" title="このページの最上部へ"> PAGETOP</a> <hr class="bg-primary"> <p><a href="main/sitepolicy.html">サイトポリシー</a></p> <p>©SINCE2007 asa_1 All Rights Reserved.</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
上述の内容ですと想定通りとなります。
この記述からcss部分を削除し外部ファイルにすると、背景画像の部分が、グレーの塗りつぶしになってしまいます。
何故でしょうか?どこが誤っているのか分かりません。
ど素人の私に、どなたか御教示頂けないでしょうか?
よろしくお願い致します。
以下がcssの内容です。
<style type="text/css"> <!-- .jumbotron{ background-repeat: no-repeat; background-position: center; background-image: url("../material/background.GIF") } .tate{ writing-mode: vertical-rl; } --> </style>
以下は「切り出した」ファイルの内容です。
<!doctype html> <html lang="ja"> <head> <title>タイトル</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <div class="container"> <div class="row bg-primary"> <div class="col-md-1"> <a name="top" href="index.html"><img class="float-left mt-1" src="material/logo.GIF" alt="ロゴ"></a> </div> <div class="col-md-11"> <h1 class="text-white ml-3">タイトル</h1> <p class="text-white text-right" >サブタイトル</p> </div> </div> <div class="row"> <div class="col-md-3"> <div class="btn-group-vertical btn-sm btn-block"> <div class="dropdown btn-block"> <a class="btn btn-outline-primary btn-sm btn-block" href="index.html">ホーム</a> <a class="btn btn-primary btn-sm btn-block" href="main/index.html">メイン</a> <a class="btn btn-primary dropdown-toggle btn-sm btn-block" id="dropdown4" data-toggle="dropdown" href="#">ドロップダウンメニュー4</a> <div class="dropdown-menu btn-primary btn-block" aria-labelledby="dropdown4"> <a class="dropdown-item" href="dropdown4/index.html">ドロップダウンメニュー4-1</a> <a class="dropdown-item" href="dropdown4/sub.html">ドロップダウンメニュー4-2</a> </div> </div> </div> </div> <div class="tate col-lg-9"> <div class="jumbotron"> <h3>本文</h3> <p class="col-md-2">文章</p> </div> </div> </div> <a class="badge badge-primary" href="#top" title="このページの最上部へ"> PAGETOP</a> <hr class="bg-primary"> <p><a href="main/sitepolicy.html">サイトポリシー</a></p> <p>©SINCE2007 asa_1 All Rights Reserved.</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
「切り出した」ファイルのソースを張っていただけますか? (css/stylesheet.css でしょうか)
もしかしてコメントアウトの<!-- --> が残っているとかではないかと思いますが...。
回答1件
あなたの回答
tips
プレビュー