Как уменьшить фоновое изображение в теге 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

Это 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); 
    }); 
}); 

Answer 2

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

Answer 3

есть простой трюк вы можете сделать ваш 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; 
} 

это сделает изображение акт как фоновое изображение и изменять в зависимости от ширины и высоты основного conent DIV

Answer 4

вы можете создать 2 samle CSS-классы, которые будут определять высоту и ширину фонового изображения. Скажем ...

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

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

так здесь y1 y2 < смысл class1 класс, вы должны обратиться к фоновому элемента изображения, когда вы хотите, чтобы фоновое изображение быть Samll т.е.; onclick первого тега div. Также, когда вы нажимаете на тег 3 div (когда вы хотите увеличить размер изображения) просто просто переключите класс вашего изображения на класс2. Таким образом, изображение будет больше. В jQuery u можно сделать это довольно легко, как ..

$("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 

Удачи.