2016-11-30 3 views
1

単一のページアプリケーションを作成していますが、#mainPictureがそのdivにロードされません。私はindex.htmlを私でそれを呼び出しています場所です:Flaskを使用しているときに画像がdivにロードされない

<body> 

<div id="mainPicture"> 
    <div class="picture"> 
     <div id="headerTitle">Places I've Been</div> 
     <div id="headerSubtext">A Blog About My Travels</div> 
    </div> 
</div> 

これは、スタイルシートをリンクするための私のコードです:

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/theme.css') }}"> 

そして、これが私のtheme.cssでそれのためのCSSです

#mainPicture 
{ 
    width:670px; 
    height:497px; 
    background-color:#FFFFFF; 
} 

#mainPicture.picture 
{ 
    position:relative; 
    width:650px; 
    height:487px; 
    top:10px; 
    background-image:url(hudson1.jpg); 
    background-repeat:no-repeat; 
    margin-left:10px; 
} 

それはちょうど空白として画像のサイズを示しています。 CMDERを使用して私のWebページを実行しています。イメージhudson1.jpgはtheme.cssと同じフォルダにもありますが、divに表示されることはありません。

助けがあれば助かります。

+0

cmderとは何ですか?それはブラウザですか?画像をサポートしていますか?それは、CSSファイルで設定された背景画像をサポートしていますか?リソースを取得する際に404エラーが発生していますか? – davidism

+0

'hudson1.jpg'と' theme.css'は同じフォルダにありますか?もしそうでなければ、それはあなたの問題です。 – dirn

答えて

0

セレクタが間違っています。

#mainPicture.picture 

idがmainPictureおよびclass pictureの要素を探しています。

これは、mainPictureのIDを持つ要素の子である画像のクラスを持つ要素を選択します。

関連する問題