scalable background image of popup. html, css

Question

Hi All,

I'm getting a problem in html and css, I used a bg image for my popup window whose size is 500px width and 400px height; having a scrollable text in it. but problem is that if i reduce a size of browser it get distorted. Please help me if i can make it scalable background and according to that text as per browser size.

Thanks Mayur Mate

Answer 1

You cannot scale a background if you defined it as part of your CSS without using some JS. In the example below, the black part of the background would scale/resize with the browser window but the image would not; the img would just happily sit @ top:0, left:0, render 1:1 and laugh at you.

    /* Black will scale, images does not */
    #someDiv {
    display:block;
    width:100%;
    height:100%;
    background:#000 url(someImage.jpg) 0 0 no-repeat;
    }

If you need to have your background image in your CSS for whatever reason, then read this http://css-tricks.com/perfect-full-page-background-image/ for how to manage scaling CSS backgrounds w/ JS

or

If you defined your background as an img then you have a better chance and you don't even need to use JS (although you probably should if you want to maintain ratio/scale).