在背景上浮动CSS图像

时间:2012-07-26 02:14:34

标签: html css

我正在寻找一个自定义的CSS网页,但是我很难将所有图片显示出来,除非我将最小高度设置为900px左右。索引代码如下所示,

<head>
<style type="text/css">
@import url("stylesheets/mystyle.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Small Biz Labs</title>

</head>

<body>
<div class="wrap">
        <div class="conatiner" align="center">
                <div class="header">
                    <center>
                        <img src="images/logo.png" width="200" height="100" />
                    </center>
                </div>
                <div class="text">
                    <h1>Maybe a header</h1>
                    <p>some text</p>
                </div>
        </div>
</div>


</body>


</html>

并且CSS代码看起来像这样......

/* 
Document   : mystyle
Created on : Jul 18, 2012, 1:12:14 PM
Author     : someguy
Description:
    Purpose of the stylesheet follows.
*/

html {
background:url(../images/bodybackground.jpg) repeat;
margin:0px;
max-height:100%
}

body {
background:url(../images/paperbackground.jpg) repeat-y center;
margin:0px;
margin:0px;
max-height:100%;

}


.wrap {
background:url(../images/new_backdrop.png) repeat-x center bottom fixed;
margin:0px;
min-height:1050px;
}


.container { 
max-width:600px;

}

.header {
}

.text {
text-align:left;
max-width:600px;
padding-left:10px;
}

我正试图让瓶子漂浮在我制作的两种纹理上。允许将文本/图像等放置在较小的较浅版本的纸张纹理中。到目前为止,只有将max-height设置得足够大,我才能做到这一点。有关如何调整代码的任何建议? 在我获得更多积分之前,我正在使用的图像无法发布,但是如果你想看到它们让我知道并且生病了jpgs和一个png(漂浮的那个)。

如果你想看半身像version jsfiddle:http://jsfiddle.net/wKtGv/

1 个答案:

答案 0 :(得分:0)

尝试添加高度:100%;身体和.wrap http://jsfiddle.net/wKtGv/13/