发表新帖
发表新帖

How to make full screen background in a web page

前端 未结
关注
10 1482
予麋鹿
予麋鹿 2020-12-15 09:46

How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?

相关标签:
10条回答
  • 误落风尘
    2020-12-15 10:00

    CSS

    .bbg { 
    /* The image used */
    background-image: url('...');

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

    HTML

    <!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
    0 讨论(0)
  • 囚心锁ツ
    2020-12-15 10:03

    Use this CSS to make full screen backgound in a web page.

    body {
    margin:0;
    padding:0;
    background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
    0 讨论(0)
  • 名媛妹妹
    2020-12-15 10:08

    its very simple use this css (replace image.jpg with your background image)

    body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
    0 讨论(0)
  • 一个人的身影
    2020-12-15 10:11

    Use the following code in your CSS

    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;
}
    here's the link where i found it:

    0 讨论(0)
  • 灰色年华
    2020-12-15 10:13

    um why not just set an image to the bottom layer and forgo all the annoyances

    <img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
    0 讨论(0)
  • 走了就别回头了
    2020-12-15 10:14

    Via jQuery plugins ;)

    • http://srobbin.com/jquery-plugins/backstretch/
    • http://buildinternet.com/project/supersized/
    0 讨论(0)
 看不清?
提交回复
热议问题