html页面背景位置,html – 将内容与背景图像对齐

我有这张图片,我想制作一个网页：

包含的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,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,15);

}

.purple:hover{

top: 198px;

left: 675px;

height: 191px;

width: 191px;

}

.purple:active{

background-color: rgb(45,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,.75);

color: rgb(250,250,200);

font-family: "Open Sans",sans-serif;

font-size: 10pt;

text-align: center;

}

KavCloud

Button

Page by Sean Robert Letendre