修正背景サイズ：カバー;問題

私は単一のページのウェブサイトを作成しようとしていますが、私は基本的なレイアウトをソートすることにいくつか問題があります。私が望むのは、最初のdivがブラウザウィンドウを埋めるために伸びるサイト（例えば、http://whiteboard.is）をユーザが訪問するときです。その後、2番目のdivは固定位置ですが、手動で高さを設定できるので、コンテンツを追加することができます。修正背景サイズ：カバー;問題

バックグラウンドサイズのタグを使用しようとしましたが、何らかの理由で水平方向にしか変形しません。垂直方向に設定すると、min-height：valueに設定されます。

なぜでしょうか？それはそのコンテナのサイズを大きくしないように

HTML

<body> 

<section id="first" class="clearfix"> 
<div class="scanlines"></div> 
</section> 

<section id="second" class="clearfix"> 
<div class="scanlines"></div> 
</section> 

</body>

CSS

#first { 
    background: url(1.jpg) no-repeat center center; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-width: 1024px; 
    min-height: 768px; 
    } 

#second { 
    background: url(3.jpg) center no-repeat fixed; 
    position: relative; 
    height: 8000px; 
    width: 100%; 
    } 

.scanlines { 
    background: url(scanlines.png); 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 25; 
    }

出典

2012-05-12 Ollie Barker

.scanlinesクラスのposition: absoluteは、流れのうち、ブロックを取ります。

出典

2012-05-12 21:27:58 Neil

：/ –

パディング - 左とパディング - 右の.scanlinesを追加してみてください。 .scanlinesには必ずボックスサイズ：border-boxを設定してください。

これは、コンテンツを垂直方向にも強制的に移動させます。あなたは幅：100％を持っているので、コンテンツは水平方向に流れようとします。

出典

2013-02-27 22:33:23 lockedown

最初のコンテナのサイズを設定するには、JavaScript（jQuery）をhttp://whiteboard.isで使用しています。これは古い投稿であることはわかっていますが、まだ回答が得られると思います。

私たちはいくつかのコードで少し埋まっていますが、簡単な答えはこれです（これをドキュメントの準備関数やページが読み込まれた後に呼び出す）。

$('#first').css({ 
    'height' : $(window).height(), 
    'width' : $(window).width() 
});

ホワイトボードサイトでは、これらを変数として保存し、さまざまな場所で使用していますが、これは簡単に開始できます。

実際にこの関数をユーティリティクラスに適用し、ブラウザウィンドウにサイズを設定する要素のサイト全体でこのクラスを使用します。また、ウィンドウのサイズを変更したときにこの関数を再実行するとよいことに注意してください。

マークアップ：

<section id="first" class="clearfix fillscreen"> 
    <div class="scanlines"></div> 
</section>

Javascriptを：私は完全に走査線を削除したと問題が解決しない

// the basic function, used with a class instead of an ID 
function fillscreen() { 
    $('.fill-screen').css({ 
     'height' : $(window).height(), 
     'width' : $(window).width() 
    }); 
} 

// run our sizing function on document ready 
$(document).ready(function(){ 
    fillscreen(); 
}); 

// run it again anytime the window is resized 
$(window).on('resize',function(){ 
    fillscreen(); 
});

出典

2013-12-14 05:46:26 taylorleejones

修正背景サイズ：カバー;問題

答えて

関連する問題