如何减少div标签中的背景图像？

Question

在我的html文件中，我使用了SpryTabbledPanels插件。在那里有三个div标签。 在一个div标签中，我的数据较少，而另一个div标签我的数据更多。我用它来悬停。当我将鼠标悬停在第一个div标签上时，它会显示数据。但底部有很多空的空间，而另一个div标签则没有太多空间。 那么我可以在div标签中更改背景图像的高度吗？

以下是背景图片的css：

#main-content {
    /*margin:0px 225px;*/
    margin-left:auto;
    margin-right:auto;
    margin-top:35px;
    width:900px;
    /*width:100%;*/
    height:auto;
    /*height:1053px;*/
    /*background: -moz-linear-gradient(top,  #fff , #ccc);
    background: -webkit-gradient(linear, left top, left bottom, (#E5E5E5) to(#ccc));
    background: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#000000.');*/

    border-top-left-radius:48px;
    border-top-right-radius:48px;
    border-bottom-left-radius:48px;
    border-bottom-right-radius:48px;
    padding-bottom:20px;
    min-height:1450px;
    background:url(res/back-img.png) repeat;

    }

以下是截图：

Answer 1

你可以做一个简单的伎俩 你的html例如应该是

<div id="main-content">
    <img src="res/back-img.png"  />
    <p>some content</p>
</div>

你的css应该是这样的：

#main-content{
    position: relative;
    /* the  rest of your css */
}
#main-content img{
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
}

这将使图像像背景图像一样，并根据主要内容div的宽度和高度进行更改

Answer 2

你可以创建2个samle CSS类，它们将定义背景图像的高度和宽度。 让我们说......

     .class1{
         width : x1 px;
         height : y1 px;
     }

     .class2{
        width : x2 px;
        height : y2 px;
     }

所以这里y1＆lt; y2表示当你想要背景图像时，class1是应该应用于背景图像元素的类，即; onclick of first div tag。 此外，当你点击3 div标签时（当你想要更大的图像尺寸）时，只需将图像的类别切换到class2即可。所以图像会更大。在jQuery中，你可以很容易地做到这一点......

    $("get ur image element here").class("class1"); //whwen u want image to be samller

    $("ur image element").class("class2"); //when u want the image to be larger

祝你好运。

Answer 3

div {
    width:50px;
    height:100px;
    background:red;
}

Answer 4

这是更改背景图像高度的jquery 我们可以根据需要给出任何高度。

$(document).ready(function(){
    $("#tab1").hover(function(){
    var height = 1000;
    $('#main-content').height(height);
    });
    $("#tab2").hover(function(){
    var height = 1200;
    $('#main-content').height(height);
    });
    $("#tab3").hover(function(){
    var height = 1400;
    $('#main-content').height(height);
    });
});