Geek asks and answers

How to resize body background image on aspx page

I have been looking for this and googling from quite a few days, but not getting a satisfactory solution.

I have an aspx page, the background property of the body has an image of type. Image Size of 3000 X 2000 px. Therefore, when rendering a page, the image does not fit properly and inflates, because it does not resize in accordance with the size of the window (more precisely, the screen resolution). How to resize the background image so that it matches the exact size of the browser window without cropping or swelling?

Is it possible to install CSS or use jquery / javascript.

Any pointers would be very good !!!

+3
source share
4 answers

CSS3 "background-size"

:

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

CSS : http://www.w3.org/TR/css3-background/

, :)

: ;)

+2

, . → css-tricks.com

, , .:).

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')";
}
+3

SO, , 100% .

0

A background-imagenever changes. (Unless you use the new background-size , which is only newer browsers (CSS3) )

What you can do is put the div scale below your div-content and add your image there as <img>with the correct scaling.

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

More articles:


All Articles