CSS question: How can I set a width for a background image?
I must be missing something simple... I am trying to create an html page that has an image set as the background. Now I'd like the image to take up 70% of the page, aligned to the top right.
I was able to get the image to align to the top right of the page, and it looks pretty good in chrome, but terrible in IE. In IE, the image takes up the entire page - which affectively ruins the look and feel of the page...
Is there something I'm missing? How can I limit the size of the background image in IE? Any thoughts? code below:
<html>
<head>
<style type="text/css">
body {
margin: 0;
background: transparent url(Background2.png) no-repeat fixed right;
background-position: right top;
font开发者_如何学Python-size:12px;
}
</style>
</head>
<body>
Hello!
</body>
This is a CSS3 feature and only supported in the latest browsers. Mozilla introduced this feature in Firefox 3.6, i'm not sue when Webkit/Chrome did.
-moz-background-size: 300px;
-webkit-background-size: 300px;
background-size: 300px;
You can find a Mozilla documentation here.
Width CSS3 you can do the following:
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Other you should use some tricks as it is described here. The best mentioned way there is:
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Another fake solutions are here.
加载中,请稍侯......
精彩评论