重复背景图像被切断 [英] Repeating Background image getting cut off

问题描述

我有一个容器DIV，它的高度内容。

I have a container DIV which scales with it's content in height. It has a background image that repeats down making a pattern.

问题是重复的背景图片在div底部被切掉。

The Problem is the repeating background image gets cut off at the bottom of the div.

有没有办法告诉背景图片不会被切断？

： http://jsfiddle.net/WkEKD/7/

感谢

推荐答案

如果div的高度（如果height为auto）你的背景图像的高度，它会被截断（ overflow：visible 不适用于背景图像）。两种可能的解决方案是：

If the height (computed if height is auto) of your div is not a multiple of the height of your background image, it will get cut off (overflow: visible does not apply to background images). Two possible solutions are:

1. 确保您的DIV的高度是背景图像高度的倍数


2. 使用 background-size 属性（仅限CSS3）缩放背景图片以填充DIV（如果适用）


3. 使用一些JS将DIV的高度设置为背景图片高度的最接近的倍数（即基本上等于1，但通过JS）

1. Make sure your height of your DIV is a multiple of the height of your background-image
2. Use the background-size property (CSS3 only) to scale the background image to fill the DIV (if applicable)
3. Use a little bit of JS to set the height of your DIV to the nearest multiple of the height of your background image (i.e. basically same as 1, but via JS)

选项＃3的代码

演示： http://jsfiddle.net/h6tUs/2/

var img = new Image();
img.onload = function() {
    adjustHeight(img.height);
};
img.src = 'http://www.jamfactory.co.za/left.png';
if(img.complete) {
    adjustHeight(img.height);
}
function adjustHeight(_imgHeight) {
    var ht = $('#container').outerHeight(false);
    ht = ht + (ht % _imgHeight);
    $('#container').height(ht);    
}

上述代码应该放在你的 $ ）.ready（...）

The above code should go inside your $(document).ready(...)

这篇关于重复背景图像被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！