将内容与背景图像对齐
我有这张图片，我想用它制作一个网页：
包含的 HTML 和 CSS 具有它，因此当我在 Firefox 全屏上查看页面时，页面看起来像这样：
这正是我想要的，但我无法弄清楚按钮位置和背景图像大小的组合，当页面调整大小时，按钮会缩小并随着“太阳”移动，以便“太阳” ' 仍然覆盖。这样做的方法是什么？
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{
position: fixed;
background-image: url("dHbl8SP.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 5000px;
background-position: top center;
background-attachment: fixed;
}
.purple{
color: rgb(0,100,200);
border-radius: 50%;
background-color: rgb(55,0,55);
font-family: "Ubuntu Condensed", sans-serif;
font-size: 17pt;
position:inherit;
top: 202px;
left: 679px;
height: 183px;
width: 183px;
border-style: solid;;
border-color: rgb(15,0,15);
}
.purple:hover{
top: 198px;
left: 675px;
height: 191px;
width: 191px;
}
.purple:active{
background-color: rgb(45,0,45);
color: rgb(0,150,150);
}
footer {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
heigth: 8px;
align-self: stretch;
background-color: rgba(8,8,8,.75);
color: rgb(250,250,200);
font-family: "Open Sans", sans-serif;
font-size: 10pt;
text-align: center;
}<!doctype HTML>
<html>
<head>
<title>KavCloud</title>
<meta charset="UTF-8"/>
<link href="kavCloud.css" rel="stylesheet" type = "text/css" />
<script src="kavCloudScriptingOne.js"></script>
</head>
<body>
<header>
</header>
<button type = "button" onClick = "f1()" class="purple">Button</button>
<footer>Page by Sean Robert Letendre</footer>
</body>
</html>我会用你可以控制的图像代替太阳。由于背景被设置为覆盖，因此无法考虑太阳可能出现的所有位置。因此，观看它的设备的高度和宽度可能会有所不同。将太阳创建为图像，将按钮放在顶部并赋予它们相同的位置和尺寸。