How to reduce background image in div tag?

Question

In my html file i have used a SpryTabbledPanels plugin. In that there are three div tags. In one div tag my data is less and another div tag my data is more. I used hover for that. When I hover on first div tag it shows data. but there is much empty space at the bottom and in another div tag there is not much space. So please can I change the height of background image in div tag?

Following is css for background image:

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

    }

Following are screenshots:

Screenshot of 1st div tag screenshot of second div tag

check this thread http://stackoverflow.com/questions/1341358 — Arie Xiao, Mar 28 '13 at 11:17

score 2 · Answer 1 · answered Mar 28 '13 at 14:26

there is a simple trick you can do your html for example should look like

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

and your css should look like:

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

this will make the image act like a background image and change according to the width and height of the main-conent div

score 2 · Answer 2 · answered Mar 29 '13 at 08:35

you can create 2 samle CSS classes which will define the hieght and width of the background image. Let's say...

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

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

so here y1 < y2 meaning class1 is the class you should apply to your background image element when you want the background image to be samll ie; onclick of first div tag. Also when u click on 3 div tag(when u want the size of image bigger) just simply toggle the class of your image to class2. So the image will be larger. In jQuery u can do this quite easily as..

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

Good Luck.

score 1 · Answer 3 · edited Mar 28 '13 at 12:58

1

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

edited Mar 28 '13 at 12:58

James Donnelly

126,410
34
208
218

answered Mar 28 '13 at 12:34

Chetan Sanghani

2,058
2
21
36

score 1 · Accepted Answer · answered Mar 29 '13 at 12:01

This is jquery to change the background image height We can give any height as we want.

$(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);
    });
});

How to reduce background image in div tag?

4 Answers4