I have this photo that I want to take with:
The incoming HTML and CSS have it so that the page looks like this when I view it in full Firefox:
This is exactly what I want, but I can’t understand the combination of button position and background image size, which make it so when the page is resized, the button is compressed and moved using the “sun”, so that the “sun” remains covered. What is the method for doing this?
@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>
source
share