图像不是100％宽度，并且在缩小时不能正确延伸

Question

我在网站底部有一个关于某些内容的栏。问题是，尽管有代码，但它目前还没有扩展（宽度）来覆盖整个屏幕。

HTML非常基本

<div class="bottom-ulity">
other content goes here
</div>

CSS：

.bottom-ulity {
    height     : 57px;
    width      : 100%;
    right      : 0;
    position   : fixed;
    bottom     : 0;
    background : url('../images/inner-show-text.png') repeat-x left top;
    z-index    : 1000;
}

我尝试过给出最小宽度：100％，尝试将2046px添加为最小宽度。我查看了其他一些页面并看到了“background-size：100％”和“background-size：cover”的建议。这两行代码都给出了相同的结果，它使图像本身正确延伸，但它失去了所有的效果，如渐变，而是给我一个基本的灰色。

我尝试删除里面的所有div，看看里面的代码是否导致了这个，但事实并非如此。当我添加“background-repeat：no-repeat;”时，我注意到图像只会出现一次并且根本没有延伸，在条形图所在的位置留下了一个巨大的间隙孔（缩小了远处）很明显。）

这是显示问题的图片：

Answer 1

我找到了一个问题的黑客，至少有一个暂时足够好。我决定添加background-size: 100% 在我开始放大之前似乎解决问题的css。虽然图像本身是一个并且应该具有100％的宽度，但是它会开始向上移动，尽管它是一个固定的位置，有底部和右边设为0.我决定添加

background-size: 200%;

这解决了问题，虽然作为图像一部分的边框显然是目前的两倍大，这意味着当它完美地工作时，边框厚度是它的两倍并不那么优雅。

更新：对该解决方案的修复只是降低了如果img允许一半将会重复的px。由于背景大小为200％，这意味着一切都成倍增加。因此，如果您有不同的％来修复类似问题，请记住在进行更改之前您拥有的像素数。