how to resize background image of body in aspx page

Question

I am searching this and googling out since quite a few days now, but not getting satisfactory solution.

I have an aspx page, the background property of the body has an image like . The image size is 3000 X 2000 px. So when rendering the page, the image is not coming properly and is bloated because its not resizing itself according to the size of the window (or more precisely the resolution of the screen). How can I resize the background image so that it fits in exactly as per the browser window size without cropping or bloating?

Can it be done setting the CSS or using jquery/javascript.

Any pointers would be very great!!!

score 3 · Answer 1 · answered Sep 06 '12 at 14:46

I bet this might work for you. I was having a hard time looking for answers for this too and came across this page -> css-tricks.com

I then tried to use the code provided on the page and it worked perfectly. :).

html { 
    background: url(images/green_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

Nicholas · Accepted Answer · 2011-06-10T11:56:57.360

There is a new property for backgrounds in CSS3 called "background-size"

Try this:

    <html>
       <head>
          <title>Background-Image Test</title>
          <style>
             body {
                background-image: url(./3840x1200.jpg);            
                background-size: 100%;
                background-origin: content;
                background-repeat: no-repeat;
             }
          </style>
       </head>
       <body>
          <!-- your content here -->
       </body>
    </html>

You can find more informations about the CSS background properties here: http://www.w3.org/TR/css3-background/

Hope this helps :)

Edit: Changed Link from working draft to final version ;)

background-size is a CSS3 property and won't work on older browsers. See http://www.w3schools.com/css3/css3_pr_background-size.asp for supported browsers. — dotty, Jun 10 '11 at 11:36

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

See this SO question it talks about making a picture stretch 100% the size of the window.

edited May 23 '17 at 11:55

Community

1
1

answered Jun 10 '11 at 11:18

dotty

40,405
66
150
195

score 0 · Answer 4 · answered Jun 10 '11 at 11:21

A background-image never resizes. (Unless you’re using the new background-size, which only newer browsers (CSS3) support)

What you can do is put a scaling div below your content-div and add your image there as an <img> with proper scaling.

<div style="position:absolute; background:#cccccc; width:100%; height:40px;">bg</div>
<div style="position:absolute;">content</div>

how to resize background image of body in aspx page

4 Answers4