Display an image of 1920x1170 / 183KB as BG using CSS
I want to display an image of 1920x1170 pixel / 183KB as a background image, here is my code
.bground{
height:auto;
left:0;
position:fixed;
top:0;
width:100%;
}
<div class="bground" style="left:0px;">
<img src="Untitled-2.jpg" />
</div>
It displays the image alright, but the problem is that I can see o开发者_如何转开发nly half the image, not full. And when I right click, the menu says save image as, copy image, copy image url. I expect reload page...etc....
How do I correct it.
Thanks Jean
You can use CSS3 media queries to scale background images: http://www.alistapart.com/articles/supersize-that-background-please/
Your CSS is incomplete, and you probably should set the image as background image (not sure, you're not giving more detail about your situation). Try
.bground{
height:auto;
left:0;
position:fixed;
top:0;
bottom: 0;
right: 0;
background-image: url(Untitled-2.jpg);
background-position: left top; /* Adjust to liking */
background-repeat: no-repeat;
}
<div class="bground">
</div>
hmtl, body { height: 100%; width: 100% }
.bground {
width: 100%;
height: 100%;
background: url(Untitled-2.jpg) no-repeat center center;
}
<div class="bground">
</div>
Your image was probably cut because <html> was not taking all the screen space.
hmtl, body { height: 100%; width: 100% } .bground { width: 100%; height: 100%; background: url(Untitled-2.jpg) no-repeat center center; }
this is right answer .........
加载中,请稍侯......
精彩评论