css背景图像定位

时间:2010-10-19 04:22:22

标签: css image background positioning

我需要帮助在网页上定位两个图像。我希望两个图像都固定在页面上,因此一个将固定在页面的左上角,另一个将固定在右下角。但我也希望背景是黑色的,所以如果有很多文字或内容,那么两个图像都会变长。以下是帮助解决问题的图片。

http://www.imagecross.com/11/image-hosting-view-53.php?id=4949contextual.png

2 个答案:

答案 0 :(得分:0)

示例html

<div id="topLeft"></div>
<div id="bottomRight"></div>

CSS:

BODY {
    background-color: black;
}

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottomRight {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    bottom: 0px;
    right: 0px;
}

调整高度和宽度以品尝

答案 1 :(得分:0)

快速浏览 - 将右下方的图像附加到body标签(带背景颜色),并将body和html高度设置为100%,如下所示:

html { 
        min-height: 100%;
}

body { 
        background: url('http://cvcl.mit.edu/hybrid/cat2.jpg') no-repeat bottom right #000;
        height: 100%;
}

然后你可以像往常一样在任何div中设置左上角的图像,如bemace建议的那样:

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}