css scaled background image
i can get images scaled to fill the window when they are the content, like so: (without any html5 or div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<img src="wacard.png" alt="original image" title="">
but
this fails (both "html, body" and just "body")
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<body
style="background-image: url(wacard.png);">
</body>
as picked up picked up from here: Resize HTML5 canvas to fit window but as far as i understand, that must have some more fancy code than i know of, going on, ... or i'm doing something wrong...
how can i get background images to scale? (ideally, with开发者_运维问答out javascript)
Here is a great tutorial with several solutions: http://css-tricks.com/perfect-full-page-background-image/ Complete with demos and the step by step coding process.
The HTML5 way mentioned is:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
There is an ie fix mentioned in the article.
As I understand you want to create a full page re-sizable background. If so, follow the instructions here => http://css-tricks.com/perfect-full-page-background-image/
Also consider for further review and options, as in my case, the value of the
background-position:
setting options...
http://developer.mozilla.org/en-US/docs/Web/CSS/background-position
and also
background-origin:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
that accompany the backbackground-image CSS style setting.
afaict, with a background image added
e.g. background: url(back.jpg) fixed;
all that's needed to make it scale, is
background-size: cover;
less is more. ;)
加载中,请稍侯......
精彩评论