2017-07-09 42 views
1

恐らく非常にばかげた質問ですが、私が最近購入したドメインを使って自分のウェブサイトをオンラインにしようとしているので、背景画像がまったく読み込まれていないようです。CSS - 背景画像

body { 
 
    margin: 0; 
 
    background-image: url("homepage1.jpg"); 
 
    background-size: cover; 
 
    font-family: 'Parisienne', cursive; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.navbar { 
 
    background-color: none; 
 
    width: 100%; 
 
    height: 30px; 
 
    padding-top: 0; 
 
    text-align: center; 
 
} 
 

 
.navbar a { 
 
    padding: 20px; 
 
    font-size: 2.0em; 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
.navbar a:hover:not(.active) { 
 
    color: #B22222; 
 
} 
 

 
.homepage { 
 
    padding-top: 15px; 
 
} 
 

 
#welcome { 
 
    color: black; 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 

 
#welcome h1 { 
 
    font-size: 50px; 
 
}
<div class="homepage"> 
 
    <div class="navbar"> 
 
    <a href="#" class="active">Home</a> 
 
    <a href="#">Schedule</a> 
 
    <a href="#">Accommodations</a> 
 
    <a href="#">Travel</a> 
 
    <a href="#">Activities</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
    <div id="welcome"> 
 
    <h1>Tracey & Jonathan's Wedding</h1> 
 
    <p>16/08/2018</p> 
 
    </div> 
 
</div>

+0

イメージファイルは.cssファイルの横にありますか? – Kiwad

+1

ブラウザの開発者ツールを使用して、問題の原因を特定します。 – SLaks

+0

画像はCSSフォルダ内に配置する必要があります –

答えて

-1

あなたの "homepage1.jpgは、" あなたの "IDontKnowTheName.css" と同じフォルダにある必要があります。そうでない場合は、そこに移動するか、 "サブフォルダ/サブフォルダ/....../ homepage1.jpg"を実行するか、 "../"を使用してフォルダを上に移動できます。

0

イメージはフォルダにあり、イメージに到達するためには、その証跡を置く必要があります。example - background-image:url(フォルダ名/フォルダ名/ homepage1.jpg); ---フォルダ名は画像が格納されているフォルダの名前になります。これを行うこともできます--- background-image:url(../ homepage1.jpg);

ここでは、コーディングを追加したときの結果を示します。 この画像を取得するためのコードは次のとおりです。 - background-image:url(images/free%20images/pixabay/faucet-1684902_640.jpg);

enter image description here

これは私が

+1

これは問題の画像ではありません。「 "" 'または' '' ':) – LKG

0

フォルダ構造1

  • index.htmlを
  • homepage1.jpg
  • のstyle.cssを教えてください助け、そうでない場合は希望

そして背景画像URLはなり

background-image: url("homepage1.jpg"); 

フォルダ構造

  • index.htmlを
  • 画像(フォルダ)
    • homepage1.jpg
  • style.cssに

そして背景画像URLが2枚の

  • index.htmlを
  • 画像(フォルダ)

      background-image: url("images/homepage1.jpg"); 
      

      フォルダ構造になり

    • ホームページ1。JPG
  • スタイル(フォルダ)
    • のstyle.css

そして、背景画像のURLも一緒に実際のイメージ名を比較

background-image: url(../images/homepage1.jpg"); 

になります背景画像のURLで

0

cssファイルの場所を確認してください! 動作しない場合は、F12を入力し、コンソールを選択してください。その後、スクリーンショットを撮ってここに入れてください。