4
私は私がWebページを作りたい、この絵があります。合わせるコンテンツ
に付属のHTMLとCSSをページは次のようになりますように、私はそれを見たときにそれを持っていますFirefoxのフルスクリーン：
私が欲しいだけのものですが、私は、ページのサイズが変更されたときにそれを作るボタンの位置や背景画像サイズの組み合わせ、ボタンを把握することはできません縮小し、m 「太陽」が覆われたままになるように、「太陽」で溢れています。これを行う方法は何ですか？
@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>
あなたがバックグラウンドサイズとして 'cover'を使っているとすれば、これは太陽の場所が矛盾していることを意味し、純粋なCSSではこれが可能ではないと思います。それがカバーしていない場合、私はあなたがそれを得ることができると思う[vwとvh]（http://www.quirksmode.org/css/units-values/viewport.html）ユニット（pxの代わりに） –
なぜあなたは画像から太陽を取り除き、代わりにボックスシャドウを使用しないでください。たくさんの頭痛を節約しますか？ – bugwheels94
jQueryで背景カバーに比例する[スケール要素]の重複の可能性あり（http://stackoverflow.com/questions/35942014/スケール要素に比例したバックグラウンドカバー付きjquery） – LGSon