背景图像要根据屏幕大小自动拉伸答案

【问题标题】：Background Image want to stretch automatically based on screen size背景图像要根据屏幕大小自动拉伸
【发布时间】：2017-12-10 22:04:27
【问题描述】：

而且图像必须根据屏幕尺寸自动拉伸

body{
    background-image:url("BG URL");
}

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

试试这个background-size:cover

body{
    background:url("myBgUrl");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

more info

【讨论】：

非常推荐使用background-size: cover。对于不支持的浏览器，可以使用polyfill。

【解决方案2】：

试试这个：

.classname
{
background: url(../images/background.jpg) no-repeat; 
background-position:center center; 
background-attachment:scroll; 
background-size:100% 100%;  
}

【讨论】：

【解决方案3】：

请使用这个，它将支持所有浏览器

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>

调用图片

jQuery(document).ready(function() 
    {
     $.backstretch("path/to/image.jpg");

    });

你可以从这里下载 js 文件 https://github.com/srobbin/jquery-backstretch

【讨论】：

【解决方案4】：

body
{
background:url(/image/bg.jpg) repeat-x;
}

如果不工作!!!!

body
{
background:url(/image/bg.jpg) repeat;
}

希望对你有所帮助。

【讨论】：