how to have an image as background on html page
I have a sketch in pixels 1280 x 1024 and I want this sketch as background image of my html page and whatever else I show on the webpage will come on top of this image as div elements
I've seen this being done on many sites but when I put the image in the background it becomes so that I have o scroll the page horizontally.
Below is my css
body #background img {
left: 0;
min-width: 1024px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
}
<link rel="stylesheet" href="开发者_运维问答/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
<div id="background">
<img src="images/Sketch1.jpg">
</div>
</body>
Update
putting image in background with no-repeat cuts the image down.
I've put an example here: http://jsbin.com/ekaxum/2
body {
background: url(url_here) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
From the CSS 3 specification:
‘contain’: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
Hi Mike and welcome to Stackoveflow.
Just add the height:100%; property to the image's CSS style. The problem is that it's height is more than your actual window size so the vertical scrollbar appears. It changes the available window width and that's why you see the horisontal scrollbar.
加载中,请稍侯......
精彩评论