2016-04-02 3 views
-2

を抱えている:ヘッダーの背景としてjordandevelop.com/test/img/header.jpg私は応答ヘッダーの背景を設定しようとしているが、私はだから私はこのイメージを設定しようとしている問題

。私が持っている問題は、それが異なる画面解像度に応答しないということです。以下は、私が現在のデザインで使用しているCSSです。

header { 
    width: 100%; 
    height: 1600px; 
    min-height: auto; 
    text-align: center; 
    color: #fff; 
    background-image: url(../img/header.jpg); 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

アドバイスは素晴らしいものです。ここに、ウェブサイトへのリンクがあります:https://jordandevelop.com/test/

EDIT:私の現在のCSSのヘッダーです。

header { 
    position: relative; 
    width: 100%; 
    min-height: auto; 
    text-align: center; 
    color: #fff; 
    background-repeat: no-repeat; 
    background-image: url(../img/header.jpg); 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

header .header-content { 
    position: relative; 
    width: 100%; 
    padding: 100px 15px; 
    text-align: center; 
} 

header .header-content .header-content-inner h1 { 
    margin-top: 0; 
    margin-bottom: 0; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

header .header-content .header-content-inner hr { 
    margin: 30px auto; 
} 

header .header-content .header-content-inner p { 
    margin-bottom: 50px; 
    font-size: 16px; 
    font-weight: 300; 
    color: rgba(255,255,255,.7); 
} 

@media(min-width:768px) { 
    header { 
     min-height: 100%; 
    } 

    header .header-content { 
     position: absolute; 
     top: 50%; 
     padding: 0 50px; 
     -webkit-transform: translateY(-50%); 
     -ms-transform: translateY(-50%); 
     transform: translateY(-50%); 
    } 

    header .header-content .header-content-inner { 
     margin-right: auto; 
     margin-left: auto; 
     max-width: 1000px; 
    } 

    header .header-content .header-content-inner p { 
     margin-right: auto; 
     margin-left: auto; 
     max-width: 80%; 
     font-size: 18px; 
    } 
} 
+0

* respond *で達成しようとしていることを詳しく説明できますか?画像のサイズを変更したいのですか? – Louis

+0

'cover'の代わりに' contain'を試してください(そして背景色を黒にしてください) – Aziz

+0

@Aziz私はブラウザをより肌に似せば、巨大な黒いブロックを持っています。 –

答えて

2

次のコードは動作するはずです:

CSS:(自分のCSSコードに以下を追加します)

header{ 
    background: url(/test/img/header.jpg); 
    background-size: cover; 
} 

か(この1つは応答して、画像全体を保持する)

header{ 
    background: url(/test/img/header.jpg); 
    background-size: 100% 100%; 
} 

希望、お楽しみください!

+0

両サイドに2つの大きな黒いブロックがあります。 –

+0

が更新され、両方の方法でテストされ、両方とも動作しています:) – Angelo

+0

私はjsfiddleを提供できますか?ここに私のhttps://jsfiddle.net/1qsfumud/ –

関連する問題