html background image repeated when opened in mobile browser

Question

I just started learning xhtml and css. I wrote a web page for my self. It looks fine when opened in laptop and PC browsers. but the background image repeated twice vertically in mobile browser. I tried to set width, height or background-repeat to modify it but whenever I do it, the image just disappears. I looked up here, the other answers are a bit too deep for me to understand.

here is my web page: clownbox.tech

here is my css code for the body:

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

here is the html code of the body:

  <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:gjh93@yahoo.com">Email Chris</a>
  </body>

score 2 · Accepted Answer · answered Jun 25 '16 at 01:16

Aaron's solution is correct.

However, since you are admittedly new to development, I'd love to add to this. Aaron's solution is great for using images, and your question was, in fact, about using an image. However, your background, in this case, is a gradient. If you want to render a gradient, it is better to simply render out a gradient through css and avoid using an image altogether.

Here's an example: https://jsfiddle.net/yojuo7m2/2/

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

The above code will get you a gradient in modern browsers. See the fiddle for additional syntax for older browsers.

I suggest reading up on gradients to fully learn the syntax. Once you understand it, though, you can easily create the code for them at colorzilla's gradient generator site. Here's a link to your particular gradient: http://www.colorzilla.com/gradient-editor/#89ffde+0,8f4bff+100

I hope this was a helpful addition to Aaron's solution.

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

change the css to:

    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

edited May 23 '17 at 12:24

Community

1
1

answered Jun 25 '16 at 00:49

user31415

446
7
16

Hi Aaron, thanks, it does not disappear now. but it still does not work on the mobile browser, it does not fill the whole browser window – gjjhhh_ Jun 25 '16 at 00:58
You sure? It works on my chrome inspect-element mobile viewer, and my Android phone. Did you reload? It may just be me. What browser do you use? – user31415 Jun 25 '16 at 01:10
See David Vasquez's addition. Fabulous solution. – user31415 Jun 25 '16 at 01:26

html background image repeated when opened in mobile browser

2 Answers2