重複基於div大小的圖像

我一直在研究一個需要跨瀏覽器兼容性的網站（包括較早的IE），並且我有一個使用漸變的邊欄，但事實證明它的使用容易一百萬倍設置背景圖像，我有高度的圖像重複正確的基礎上取決於主容器的高度，但我想要做同樣的寬度。重複基於div大小的圖像

我知道如何根據其他人的尺寸來拉伸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>

但是似乎無法找到專區內任何東西。

來源

2012-07-10 Hello World

如何向我們展示一些代碼，甚至更好地創造一個http：/ /jsfiddle.net/ – ManseUK 2012-07-10 08:41:22

增加了高度JS – 2012-07-10 08:44:40

創建jsfiddle請 – Feanor 2012-07-10 08:59:32

只是想我會更新我設法得到這個工作使用這樣的：

<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>

來源

2012-07-16 08:40:00

這些CSS可以幫助

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

來源

2012-07-10 09:52:43

這完全沒有幫助... – 2012-07-10 14:07:41

重複基於div大小的圖像

回答

相關問題