Background image is stretching
I have a 40x1000 jpg file for my background. My CSS is as follows:
body
{
margin: 0px;
padding:0 px;
text-align: center;
background-image: url(jute_for_web1.jpg) ;
b开发者_如何学Goackground-repeat: repeat-x;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
border-top:0px;
height:100%;
width:100%;
}
div.container
{
text-align: left;
border-color: Black;
border-width: 0px;
border-style: solid;
width: 1000px;
height: 768px;
margin: 5px auto;
background-color:White;
}
This stretches my image. What am I doing wrong?
it does not stretch your image..
You just place the .container on top of the background image, and since you have background-color:white on the container, the image at the body does not get displayed..
tell us what you want to do exactly and we can help more ..
Some of your HTML may be helpful. In this example, the image appeared correctly. (I made an image using the same name.)
<html>
<head>
<style type="text/css">
body
{
margin: 0px;
padding:0 px;
text-align: center;
background-image: url(jute_for_web1.jpg) ;
background-repeat: repeat-x;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
border-top:0px;
height:100%;
width:100%;
}
div.container
{
text-align: left;
border-color: Black;
border-width: 0px;
border-style: solid;
width: 1000px;
height: 768px;
margin: 5px auto;
background-color:White;
}
</style>
</head>
<body>
<div class="container">
Hello World!
</div>
</body>
</html>
加载中,请稍侯......
精彩评论