Search code examples
htmlcssimagepositioncenter

Making Linked Image Relative to Background Image Center


Sorry if this is a stupid question, but I'm having trouble with a 404 error page I'm trying to make.

Basically, I've set it up as a 'Where's Wally' style page with a large background image. I'm trying to create a transparent button to click on that will return the user to the page they were just on, but I need it to be relative from the centre of the page as I'm trying to ensure it will work on all screens.

Here's the code I have so far:

<!DOCTYPE html>
<html>
<head>
<style>
body { 
background-image: url('http://www.website.org/404.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 
p.pos_fixed {
position: center;
position:relative;left:-50px
</style>
</head>

<body>
<p class="pos_fixed"><a href='javascript:history.back()’><img src=‘http://www.website.org/button.png’></a></p>
</body>
</html>

Can anyone see a way to do this? I'm also very open to suggestions if there's a much better way I'm missing.

Thank you in advance!

Update: New code.

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    background-image: url('http://www.pophatesfags.org/404two.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: -50px;
  padding: 1em;
  border: 50px solid red;
}
</style>
</head>

<body>
<a class="button" href="javascript:history.back()">Link Here</a>
</body>
</html>

Solution

  • I think this is is what you are after.

    It positions the button dead center of the page and then pushes it left 50px;

    .button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-left: -50px;
      padding: 1em;
      border: 1px solid red;
    }
    <a class="button" href="javascript:history.back()">Link Here</a>

    Note This is responsive in that it will always center first but the 50px value is, in itself, not responsive...you might want that to be a percentage value too.