将图像定位在布局之外

Question

将图像定位在布局之外

rus*_*box 7 html css css3

我正在制作一个宽960像素的网站,但是如果你有一个更大的屏幕,我想要在标题的两边都能看到图像.

因为我想保持网站960px宽我需要这些额外的侧面图像不被浏览器计算,我可以让它在左边工作

看这里:

在此输入图像描述

http://www.wireframebox.com/test/sideimages/index_leftworks.html

码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; border: 0; background-color:#096 }

img { border: 0; }

#main { 
    width:960px; 
    height:216px; 
    background-image:url(main.jpg);
    position:relative;
    top:0; margin: 0 auto;
}



#left {
    width:170px;
    height:216px;
    background-image:url(left.jpg);
    float:left;
    left:-170px;
    position:relative;
}

#right {
    width:170px;
    height:216px;
    background-image:url(right.jpg);
    float:right;
    left:170px;
    position:relative;
}



</style>

</head>

<body>

    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果你让你的窗口更薄,左边的红色图像会从网站上消失,而不会导致浏览器窗口获得一个底部滚动条,但是当我尝试向右侧做同样的事情时,它不起作用

看这里

在此输入图像描述