根据div大小重复图像

Question

我一直在一个需要跨浏览器兼容性的网站（包括较早的IE）上工作，并且有一个使用渐变的侧边栏，但事实证明，使用设置的背景图片大约要容易上百万倍，通过从主容器移走高度来正确地重复图像，但是我希望宽度相同。

我知道如何根据其他对象的大小拉伸div，但我想知道如何有条件语句将图像y重复到div的末尾，这样它不仅会移动设置的图像！

我正在使用以下方法实现基于高度的重复：

<script type="text/javascript">

var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);


</script>

我正在尝试使用以下代码：

<script type="text/javascript">

var divWidth = $('#SecondaryContent').width() + 1;


if (divWidth.width() > 200) {
    alert('hello');
 $('#SecondaryContent').css('background', 'url(../images/background_slice.png)', 'repeat-x 18% 0%');
}


</script>

但是，似乎无法在div中找到任何内容。

Answer 1

这些CSS可能会有所帮助

background-repeat: repeat; // repeats x and y
background-repeat: repeat-x; // repeats x
background-repeat: repeat-y; // repeats y

Answer 2

只是以为我会更新，因此我设法使用以下方法进行工作：

<script type="text/javascript">

$(document).ready(function () {
    divExpander();
    divLineExpander();
    divWindowLineExpander();
})

function divExpander() {
    var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
}

    function divLineExpander() {
        var theWidth = $('#SecondaryContent').width() + 2;
        $('#Navigation').css('min-width', theWidth);
    }

$(window).bind("resize", divWindowLineExpander);
function divWindowLineExpander(e) {
    var theLineWidth = $('#SecondaryContent').width() + 1;
    $('#Navigation').css('min-width', theLineWidth);
    }

 </script>