javascript - 具有特殊样式的背景网址

我正在使用此代码生成一些无尽的运行横幅：

<style>
  #myimage {
    position: fixed;
    left: 0%;
    width: 100%;
    bottom: 0%;
    background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bildschirm-senkrechter-strich.jpg") repeat-x scroll 0% 0% / contain;
  }
</style>

<div id="myimage">.</div>



<script>
    var offset = 0
    setInterval(function() {
        offset +=1
        document.getElementById("myimage").style.backgroundPosition = offset + 'px 0px';
    },50)
</script>

我的问题是：现在，我希望每个图像的大小都为屏幕的100％。

我考虑过只添加属性...

background-size: 100%;

……但似乎并非如此。


  如何在不删除样式属性的情况下将每个图像的宽度设置为屏幕宽度的100％？

最佳答案

增加div的高度并尊重图像的比例：

var offset = 0
    setInterval(function() {
        offset +=1
        document.getElementById("myimage").style.backgroundPosition = offset + 'px 0px';
    },50)

#myimage {
    position: fixed;
    left: 0%;
    width: 100%;
    bottom: 0%;
    background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bildschirm-senkrechter-strich.jpg") repeat-x scroll 0% 0% / contain;

    /* you image is 1000x433 so we need 43.3% of width*/
    padding-bottom:43.3%;
    background-size:cover;
  }

<div id="myimage"></div>