ヘッダーに画像のフルサイズを表示[CSS]

ヘッダーに画像全体を表示する際に問題があります。私は含まれているとカバーと何も週を試みた、どのような助けていただければ幸いです。ここに私の問題とコードのスクリーンショットです。ヘッダーに画像のフルサイズを表示[CSS]

<html> 
<body> 
<header> 
    <section id="cd-intro"> 
     <div id="cd-intro-tagline"> 
      <img src="C:\Users\Maryam\Desktop\TravelGeni\Trip\css\Travel Geni.png" alt="Mountain View" style="width:110px;left:-80px;top:0;position:absolute;"> 

      <h1 style="top:0;">Edit Trip</h1> 
      <a href="" class="cd-btn">Delete</a> 
      <a href="" class="cd-btn">Mark Complete</a> 


     </div> <!-- #cd-intro-tagline --> 
    </section> <!-- #cd-intro --> 
</header> 
</body> 
</html>

body { 
    font-family: 'Roboto'; 
    color:#464655; 
    background-color: #E5E0CD; 
    outline:none;} 

a {text-decoration: none;} 

h1{ 
    font-family:"SummerHearts-Regular"; 
    font-size:30px; 
    text-align:center; 
    letter-spacing:16px;} 

    #cd-intro { 
    background: url(trees.jpg) no-repeat center center fixed; 
    z-index: 2; 
    margin: 0 auto; 
    display:block; 
    background-size:100% 170px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;} 

#cd-intro #cd-intro-tagline { 
    width: auto; 
    width:90%; 
    position:relative; 
    max-width: 1170px; 
    margin: 0 auto; 
    text-align: center; 
    padding-top: 20px;} 

    @media only screen and (min-width: 1170px) { 
    #cd-intro { 
    height: 170px; 
    } 
    #cd-intro #cd-intro-tagline { 
    padding-top: 5px; 
    } 
    #cd-intro input { 
    font-size: 50px; 
    } 
} 

.cd-btn { 
    display: inline-block; 
    padding: 1em 1.8em; 
    background-color:#D23C69; 
    border-radius: 5px; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    color: #E5E0CD; 
}

そして、これは私は基本的に、この絵のように、持っていたいものです。

出典

2017-04-05 Maryam Al-Mansour

。 – LGSon

ないあなたが実際にしたいとしたいが、ここではあなたのコードではありませんかわから：...

background-size:100% 170px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;

...最後の行は、最初のものを上書きします：同じパラメータ、異なる値を - >以降の1はあなたの問題は「カバー」backgrounの位置である場合、あなたはここで何かを変更したい場合があります以前の1

を上書き：

background: url(trees.jpg) no-repeat center center fixed;

このcenter centerは位置ですので、背景画像を上または下に揃えたい場合は、その2番目の「中央」（つまり、垂直位置）を「上」または「下」に、または画素値に割り当てることができる。

出典

2017-04-05 23:53:12 Johannes

ありがとうございます。ヘッダーにフルイメージを表示したいので、今はイメージの最初の部分だけを表示し、すべてを表示するわけではありません。 –

はい、当然 - 高さを170ピクセルに絞ることは望ましくありませんが、画像は比例して残っていますか？（私の質問の編集にも注意してください） – Johannes

いいえ、私はちょうどそれがヘッダー全体に収まるようにしたいので、ある言葉では私はヘッダーに全体の画像を絞りたいと思います。 –

イメージを背景として設定し、background-sizeプロパティをカバーするように設定できます。あなたが私はあなたが求めるものを見当もつかないよう、より良いを説明する必要が

body { 
 
    font-family: 'Roboto'; 
 
    color: #464655; 
 
    background-color: #E5E0CD; 
 
    outline: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
h1 { 
 
    font-family: "SummerHearts-Regular"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    letter-spacing: 16px; 
 
} 
 

 
#cd-intro { 
 
    background: url(http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg) no-repeat; 
 
    z-index: 2; 
 
    margin: 0 auto; 
 
    display: block; 
 
    background-size: 100% 170px; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#cd-intro #cd-intro-tagline { 
 
    width: auto; 
 
    width: 90%; 
 
    position: relative; 
 
    max-width: 1170px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
} 
 

 
@media only screen and (min-width: 1170px) { 
 
    #cd-intro { 
 
    height: 170px; 
 
    } 
 
    #cd-intro #cd-intro-tagline { 
 
    padding-top: 5px; 
 
    } 
 
    #cd-intro input { 
 
    font-size: 50px; 
 
    } 
 
} 
 

 
.cd-btn { 
 
    display: inline-block; 
 
    padding: 1em 1.8em; 
 
    background-color: #D23C69; 
 
    border-radius: 5px; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    color: #E5E0CD; 
 
}

<body> 
 
    <header> 
 
    <section id="cd-intro"> 
 
     <div id="cd-intro-tagline"> 
 
     <h1 style="top:0;">Edit Trip</h1> 
 
     <a href="" class="cd-btn">Delete</a> 
 
     <a href="" class="cd-btn">Mark Complete</a> 
 
     </div> 
 
     <!-- #cd-intro-tagline --> 
 
    </section> 
 
    <!-- #cd-intro --> 
 
    </header> 
 
</body>

出典

2017-04-06 04:53:52 athi

ありがとう、これは私が探していたものです、あなたの助けをありがとう、もう一度感謝！ –

ヘッダーに画像のフルサイズを表示[CSS]

答えて

関連する問題