2016-04-25 8 views
0

私はWebアプリケーションを作成していますが、私のアプリケーションからは奇妙な動作が発生しています。HTMLの奇妙な振る舞いページ

基本的には、私はbackground-imageと設定し、ウェブサイトwidthは画像lengthを引き続き通過します。ここで

はPrintScreenをです:

enter image description here

は、私はこれを修正するために何ができますか?

私は、この行で背景を設定しています:

<header style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(<?php echo base_url('assets/pagina_voluntario.jpg');?>);"> 
     <div class="header-content"> 
      ... 
     </div> 
    </header> 
+4

あなたが書いたコードは何ですか? – Wowsk

+1

あなたが行ったことを見ることができるように、あなたが書いたコードを私たちと共有してください。 – JoeL

+0

これは 'background-size:url(" ... ")cover'に役立つかもしれません。ここにあなたの質問に関するサイトhttps://css-tricks.com/perfect-full-page-background-image/ –

答えて

2

background-imageのデフォルトの動作は、それが通常のサイズだ時に一度画像を表示することです。ビューポートがバックグラウンドイメージよりも大きくなると、イメージは拡大縮小も繰り返されません。

background-size: coverとすると固定できます。これは、バックグラウンドイメージの比率を歪ませることなく、バックグラウンドをスペース全体に "カバー"させます。

background-image: url(http://...); 
background-size: cover; 

は、すべてのブラウザは、(例えば、従来のIEと古いSafariのバージョン)CSSでカバープロパティをサポートするわけではありませんが、私は来続ける:

だから、このようなあなたの背景画像のサイズを設定しますそれは完全に古いブラウザでは失敗しないように、バックフォールバック方式にあなたは、近代的な(そしておそらく、より効率的な)coverアプローチの前に追加することができます。

background: url(img2x.jpg) 0% 0%/100%; 

(オリジナルの答えを参照here