html背景の画像がモバイルブラウザで開かれたときに繰り返される

私はちょうどxhtmlとcssを学び始めました。私は自分のためにウェブページを書いた。ラップトップやPCのブラウザで開かれたときはうまく見えます。モバイルブラウザでは背景画像が縦に2回繰り返されます。私はそれを変更するために幅、高さまたは背景 - 反復を設定しようとしましたが、私がそれを行うたびに、画像は消えるだけです。私はここを見上げた、他の答えは私が理解するにはあまりにも深いです。ここhtml背景の画像がモバイルブラウザで開かれたときに繰り返される

は私のWebページである：ここclownbox.tech

はボディのための私のCSSコードです：ここ

 body { 
      text-align:center; 
      background-image:url(dark-gradient-tumblr-wallpaper-1.jpg) 
     }

は、身体のhtmlコードです：

<body> 

    <h1>Chris Guo</h1> 

    <table border="1" cellpadding="10" cellspacing="10"> 
     <tr> 
     <td><a href="https://www.facebook.com/profile.php?id=100004400829590">Facebook</a></td> 
     <td><a href="http://chrisgjh.tumblr.com/">Tumblr</a></td> 
     <td><a href="https://www.instagram.com/gjjhhh_/">Instagram</a></td> 
     </tr> 
    </table> 
    <br /> 
    <p>CS student @University of Canterbury, amateur photographer.<br /> 
    I have a little bit of passion about everything and always keen to 
    try new things. <br /> 
    <br /> 
    <a href="mailto:[email protected]">Email Chris</a> 
    </body>

出典

2016-06-25 chrisgjh

Aaronの解答は正しいです。

しかし、あなたが開発にはまったく新しいので、私はこれに追加したいと思います。 Aaronのソリューションはイメージを使用するのに最適です。あなたの質問は、実際にイメージを使用することでした。ただし、この場合の背景はグラデーションです。グラデーションをレンダリングしたい場合は、単にCSSを使ってグラデーションをレンダリングし、画像を一切使わないようにしてください。

はここに例を示します https://jsfiddle.net/yojuo7m2/2/

background: linear-gradient(to bottom, #89ffde 0%,#8f4bff 100%) no-repeat fixed;

上記のコードは、現代のブラウザであなたの勾配を取得します。古いブラウザの構文については、フィドルを参照してください。

文法を完全に学ぶためにグラデーションを読むことをお勧めします。ただし、理解してから、colorzillaのグラジェントジェネレータサイトで簡単にコードを作成できます。具体的なグラデーションへのリンクは次のとおりです。http://www.colorzilla.com/gradient-editor/#89ffde+0,8f4bff+100

これはAaronの解決策に役立つことを希望します。

出典

2016-06-25 01:16:50

は、CSSを変更します〜へ：

body { 
     text-align:center; 
     background:url(dark-gradient-tumblr-wallpaper-1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

    h1 {color:white; 
     font-family:arial; 
     font-weight:bold; 
     line-height:150%; 
    } 

    table { 
       margin:0 auto; 
       width:300px; /* or whatever width you want */ 
     font-style:italic; 
      } 

    p { 
    text-indent:25px; 
    text-align:center; 
    color:grey 
    }

from：https://stackoverflow.com/a/22556456/6496271

出典

2016-06-25 00:49:24 user31415

こんにちはアーロン、ありがとう、それは今消えません。それでもモバイルブラウザでは動作しませんが、ブラウザ全体のウィンドウには表示されません – chrisgjh

本当ですか？私のchrome inspect-elementモバイルビューアと私のAndroid phoneで動作します。あなたはリロードしましたか？それはちょうど私かもしれません。どのブラウザを使用していますか？ – user31415

David Vasquezさんの追加情報をご覧ください。素晴らしいソリューション。 – user31415

html背景の画像がモバイルブラウザで開かれたときに繰り返される

答えて

関連する問題