背景画像が途切れる

カットオフのないHTMLページに表示される背景画像としてPNG画像を取得しようとしています。私はオンラインで見つかったさまざまな単純なメソッドを使用しようとしていて、スタックオーバーフローに関する同様の質問に対する回答を読んでいますが、これまでに何もできませんでした。画像が途中で途切れています。私のHTML/CSSや画像のサイズに問題があるかどうか分かりません。背景画像が途切れる

<style type="text/css" style="display: none !important;"> 
 
    * { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    body { 
 
     overflow-x: hidden; 
 
    } 
 
    #demo-top-bar { 
 
     text-align: left; 
 
     background: #222; 
 
     position: relative; 
 
     zoom: 1; 
 
     width: 100% !important; 
 
     z-index: 6000; 
 
     padding: 20px 0 20px; 
 
    } 
 
    #demo-bar-inside { 
 
     width: 960px; 
 
     margin: 0 auto; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 
    #demo-bar-buttons { 
 
     padding-top: 10px; 
 
     float: right; 
 
    } 
 
    #demo-bar-buttons a { 
 
     font-size: 12px; 
 
     margin-left: 20px; 
 
     color: white; 
 
     margin: 2px 0; 
 
     text-decoration: none; 
 
     font: 14px "Lucida Grande", Sans-Serif !important; 
 
    } 
 
    #demo-bar-buttons a:hover, 
 
    #demo-bar-buttons a:focus { 
 
     text-decoration: underline; 
 
    } 
 
    #demo-bar-badge { 
 
     display: inline-block; 
 
     width: 302px; 
 
     padding: 0 !important; 
 
     margin: 0 !important; 
 
     background-color: transparent !important; 
 
    } 
 
    #demo-bar-badge a { 
 
     display: block; 
 
     width: 100%; 
 
     height: 38px; 
 
     border-radius: 0; 
 
     bottom: auto; 
 
     margin: 0; 
 
     background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat; 
 
     background-size: 100%; 
 
     overflow: hidden; 
 
     text-indent: -9999px; 
 
    } 
 
    #demo-bar-badge:before, #demo-bar-badge:after { 
 
     display: none !important; 
 
    } 
 

 
</body> 
 
</html>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> votepledge :) </title> 
 
    <style> 
 
     * { margin: 0; padding: 0; } 
 

 
     html, body { height: 100%; } 
 

 
     html { 
 
      background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed; 
 
      -webkit-background-size: cover; 
 
      -moz-background-size: cover; 
 
      -o-background-size: cover; 
 
      background-size: cover; 
 
     } 
 

 
     #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } 
 
     p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } 
 
    </style> 
 
</head> 
 
<body>

出典

2017-09-30 Shawn Danino

下部の画像がカットされることを意味しますか？ –

画像が切り取られるのは正常です。表示サイズはたくさんあります。ですから、テキストと背景を分けて、テキストを決して切り取らないようにするのが一番です。 – DaFois

あなたがそれを望んでどのようにこのですか？

<style type="text/css" style="display: none !important;"> 
 
    * { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    body { 
 
     overflow-x: hidden; 
 
    } 
 
    #demo-top-bar { 
 
     text-align: left; 
 
     background: #222; 
 
     position: relative; 
 
     zoom: 1; 
 
     width: 100% !important; 
 
     z-index: 6000; 
 
     padding: 20px 0 20px; 
 
    } 
 
    #demo-bar-inside { 
 
     width: 960px; 
 
     margin: 0 auto; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 
    #demo-bar-buttons { 
 
     padding-top: 10px; 
 
     float: right; 
 
    } 
 
    #demo-bar-buttons a { 
 
     font-size: 12px; 
 
     margin-left: 20px; 
 
     color: white; 
 
     margin: 2px 0; 
 
     text-decoration: none; 
 
     font: 14px "Lucida Grande", Sans-Serif !important; 
 
    } 
 
    #demo-bar-buttons a:hover, 
 
    #demo-bar-buttons a:focus { 
 
     text-decoration: underline; 
 
    } 
 
    #demo-bar-badge { 
 
     display: inline-block; 
 
     width: 302px; 
 
     padding: 0 !important; 
 
     margin: 0 !important; 
 
     background-color: transparent !important; 
 
    } 
 
    #demo-bar-badge a { 
 
     display: block; 
 
     width: 100%; 
 
     height: 38px; 
 
     border-radius: 0; 
 
     bottom: auto; 
 
     margin: 0; 
 
     background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat; 
 
     background-size: 100%; 
 
     overflow: hidden; 
 
     text-indent: -9999px; 
 
    } 
 
    #demo-bar-badge:before, #demo-bar-badge:after { 
 
     display: none !important; 
 
    } 
 

 
</body> 
 
</html>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> votepledge :) </title> 
 
    <style> 
 
     * { margin: 0; padding: 0; } 
 

 
     html, body { height: 100%; } 
 

 
     html { 
 
      background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed; 
 
      background-repeat: no-repeat; 
 
      background-size: 100vw 100vh; 
 
      background-attachment: fixed; 
 
      height: 40em; 
 
      margin-top: 0; 
 
      padding: 0; 
 
      }    
 
    
 

 
     #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } 
 
     p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } 
 
    </style> 
 
</head> 
 
<body>

出典

2017-09-30 14:42:52

あなたは多くの異なる方法でbackground-sizeを定義することができます。ここでは2例まず、画像のすべてが右resolution上に表示し、そのされていることを確認します

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
html { 
 
    background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed; 
 
    background-size: contain; 
 
} 
 

 
#page-wrap { 
 
    width: 400px; 
 
    margin: 50px auto; 
 
    padding: 20px; 
 
    background: white; 
 
    -moz-box-shadow: 0 0 20px black; 
 
    -webkit-box-shadow: 0 0 20px black; 
 
    box-shadow: 0 0 20px black; 
 
} 
 

 
p { 
 
    font: 15px/2 Georgia, Serif; 
 
    margin: 0 0 30px 0; 
 
    text-indent: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title> votepledge :) </title> 
 

 
</head> 
 

 
<body></body></html>

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
html { 
 
    background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed; 
 
    background-size: 100% 100%; 
 
} 
 

 
#page-wrap { 
 
    width: 400px; 
 
    margin: 50px auto; 
 
    padding: 20px; 
 
    background: white; 
 
    -moz-box-shadow: 0 0 20px black; 
 
    -webkit-box-shadow: 0 0 20px black; 
 
    box-shadow: 0 0 20px black; 
 
} 
 

 
p { 
 
    font: 15px/2 Georgia, Serif; 
 
    margin: 0 0 30px 0; 
 
    text-indent: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title> votepledge :) </title> 
 

 
</head> 
 

 
<body></body></html>

です。 2番目の画像が伸びてxとyの軸をカバーするように画像が見えますので、画像は順不同です。あなたは、あなたが（この場合はhtmlタグ）にスタイルクラスを適用している要素全体をカバーするために画像を引き伸ばしているbackground-size: cover;使用する場合はここで

はCSS Reference Guide

出典

2017-09-30 14:43:07

これは非常に役に立ちます、Praveen。私の目標は最初のバージョンを行うことだったので、歪んでいません。この超簡単な質問は許されますが、最初のコードブロックはHTML文書のどこに入りますか？あなたの忍耐をもう一度ありがとう。これは非常に新しいです。 –

これは '外部CSS'ファイルを使用しています。使用方法はこちらです。 https://www.w3schools.com/html/html_css.asp他に必要な場合はコメントを削除してください –

です。イメージは元のプロポーショナルを保持するので、イメージの上部と下部の一部が見えなくなることがあります。 containやautoのような他のbackground-sizeオプションを試してみてください。ただし、背景の左右を気にする必要はありません。あなたは何とかbackground-repeat-x: repeatを使って修正できます。たぶん

この便利なアプローチ：私はbackground定義でrepeatにno-repeatを変更でした

html { 
     background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) repeat center center fixed; 
     -webkit-background-size: auto; 
     -moz-background-size: auto; 
     -o-background-size: auto; 
     background-size: auto; 
    }

注意してください。

W3Schools CSS Backgroundsページを読んで、CSSスタイルを少し試してみてください。そうすれば、より良いスイートを見つけることができます。

出典

2017-09-30 15:03:21

答えて

関連する問題