2016-05-05 8 views
0

ヘッダーの背景イメージをブラウザーの高さの100%に拡張しようとしても動作しません。大きな壁紙ですが、bg画像はちょうど小さな棒ですが、私の間違いが見えますか?HMTL/CSS:ヘッダーのBGイメージをブラウザの高さの100%にする

@font-face {             /* ERSTENS LADE font family rein*/ 
font-family: 'alex_brushregular'; 
src: url('../css/alexbrush-regular-webfont.eot'); 
src: url('../css/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'), 
url('../css/alexbrush-regular-webfont.woff2') format('woff2'), 
url('../css/alexbrush-regular-webfont.woff') format('woff'), 
url('../css/alexbrush-regular-webfont.ttf') format('truetype'), 
url('../css/alexbrush-regular-webfont.svg#alex_brushregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

}

<head>            
    <meta charset="UTF-8">       
    <title>TEXT</title>        
    <meta name="description" content="text"> 
    <meta name="keywords" content="text" >  
    <meta http-equiv="expires" content="0">   
    <link rel="stylesheet" href="css/stylesheet.css">  

</head> 

<body>            
    <header>          
     <h1>TEXT <br> <span>TEXT</span></h1>  
    </header> 

    <section>          
     <article> 
     <p>TEXT</p> 
     <img src="images/spachtel1.jpg"><br> 
     <img src="images/spachtel1.jpg"><br><br> 
     </article> 
    </section> 

    <footer>           
     <h3>text<br> 
    </footer> 
</body> 
ここ

は、CSSファイルです:;(そのコードの意味を判断いけないしてください、そのちょうどHTML/CSSを実施するための)HTMLファイルのthats

html { 
font-size: 1rem; 

}

html { 
height: 100%; 

}

body { 
min-height: 100%; 
margin: 0;          
padding: 0;          

}

h1 {              /
font-family: 'alex_brushregular', 'sans-serif'; 

}

section p {              
font-weight: 100;           
font-size: 1.13rem;           
font-style: italic; 

}

span.by {              
color: red; 

}

section a { 
color: #eda318; 
text-decoration: none;         
font-style: normal; 

}

section a:hover {        
text-decoration: underline; 

}

header { 
background-image: url('../images/bgheader1.jpg'); 
background-position: 50% 50%;      
background-size: cover;       

}

答えて

1

私はあなたの背景画像は、あなたのヘッダーに影響するように設定されているため、これがあると思います。あなたの体に影響を与えてみてください。このよう<HEADER>タグの代わり<BODY>タグに背景画像スタイルを追加

+0

最初の回答Stackoverflow!驚くばかり。 1つの推奨は、あなたの推薦が意味するもののコードサンプルを提供することによって、あなたの答えを改善することです。例えばCSSコードで 'header {...}'を 'body { background-image:url( '../ images/bgheader1.jpg');に置き換えてください。 バックグラウンドポジション:50%50%; background-size:cover; } '画像をウェブページ全体に渡って表示したい場合。 – zipzit

+0

があり、ページ全体に画像が表示されます。私が望むのは、「着陸ページ」全体をカバーする画像です。スクロールすると、残りの部分が(背景画像なしで)表示されます。これはヘッダーにイメージを置くべきだと思うことを意味しますが、何が間違っているのでしょうか?例:http:// domanistudios。com/ – Richi888

0

試行:

body { 
    background-image: url('http://lorempixel.com/400/200/nature/'); 
    background-position: 50% 50%;      
    background-size: cover;       
} 
+0

が表示され、画像がページ全体に表示されます。私が望むのは、「着陸ページ」全体をカバーする画像です。スクロールすると、残りの部分が(背景画像なしで)表示されます。それは私がヘッダーにイメージを置くべきだと思うことを意味する?しかし間違っている何か...例:domanistudios.com – Richi888

0

私はそれを解決: 私のヘッダに

height: 100%; 

を書かなければなりませんでしたCSSファイル。

関連する問題