Prevent Background Repeating

 

This question already has an answer here:

  • Stretch and scale a CSS image in the background - with CSS only 18 answers

    • The CSS rule: 

    background-size: cover;

    will make the background image large enough so that it covers the element that it's a background to. This will also have the side effect of not repeating the background image.

    If you're still having trouble with background repeating after that, you can use: 

    background-repeat: no-repeat;

    to explicitly force the background not to repeat.

    So all together, in the code you provided, the full solution would be to change your body rule to this: 

    body {
 font-family: Titillium Web, sans-serif;
 background-image: url("images/polarvillebg.png");
 background-size: cover;
 background-repeat: no-repeat;
}

    You can use this code to set the image to full screen background. 

    html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    It will prevent from reapating, but there also exist : background-repeat in CSS.

    just say: 

    body{
   background-repeat: no-repeat;
   background-size: cover;
}

    "no-repeat" tells the background image to stop repeating itself. "cover" tells the image to stretch on the whole viewport (without distortion).

    链接地址: http://www.djcxy.com/p/89214.html

    上一篇: 背景图像在CSS中填充/放下

    下一篇: 防止背景重复