Aligning content with background-image

Question

I have this picture that I want to make a webpage with:

The included HTML and CSS have it so that the page looks like this when I view it on Firefox full screen:

Which is just what I want, but I can't figure out a combination of button position and background-image-size that make it so when the page is resized, the button shrinks and moves with the 'sun' so that the 'sun' remains covered. What is the method to do 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>

Given that you are using `cover` as the background-size, this means that the place the sun is will be inconsistent, and therefore I don't think this is possible with pure CSS. If it weren't cover, I think you could get it by using the [vw and vh](http://www.quirksmode.org/css/units-values/viewport.html) units (instead of px) — random_user_name, Jul 14 '16 at 17:56
Why don't you remove the sun from the image and use box-shadow instead, will save a lot of headache — bugwheels94, Jul 14 '16 at 17:57
Possible duplicate of [Scale element proportional to Background Cover with jQuery](http://stackoverflow.com/questions/35942014/scale-element-proportional-to-background-cover-with-jquery) — Asons, Jul 14 '16 at 17:57
If you want a CSS only version of the above dupe, check the last sample in this answer: http://stackoverflow.com/a/36097410/2827823 — Asons, Jul 14 '16 at 17:59

score 0 · Accepted Answer · answered Jul 14 '16 at 18:01

0

I would replace the sun with an image that you have control over. There's no way to account for all of the various possible positions the sun will have because you have the background set to cover. So the height and width of the device looking at it may vary. Create the sun as an image, put the button on top and give them the same positioning and dimensions.

answered Jul 14 '16 at 18:01

Zerry Hogan

183
2
14

1

If you check the above comments I made, you'll find several brilliant samples how this can be done. – Asons Jul 14 '16 at 18:04
Wow, i didn't even think of css viewport dimensions! Brilliant answers indeed, i'll have to keep that in mind. – Zerry Hogan Jul 14 '16 at 18:08

Aligning content with background-image

1 Answers1