how to resize background image of body in aspx page
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 resolutio开发者_运维问答n 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!!!
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')";
}
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 ;)
See this SO question it talks about making a picture stretch 100% the size of the window.
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>
加载中,请稍侯......
精彩评论