'HTML, URL's overlaying background images

I am confused as to how I can put a URL on top of an image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>


<div class="container">
  <img src="https://motionarray.imgix.net/preview-102627-XLeUsordYb-high_0015.jpg" style="width:100%; height: 100%;">
  <a href="{{url_for('login')}}"><font size = 5>Login Page</font></a><br>
  <a href="{{url_for('register')}}"><font size = 5>Register Page</font></a><br>
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered"><font size = 10>Welcome to Asteroids+</font></div>
</div>

</body>

I have a small body of code at the bottom. Within it are two URL's I made to link to other websites I am using. Im not sure how I can add them to appear over a background image. I have looked on some websites but they didnt specify the answers.

html


Solution 1:[1]

You already use position: absolute to position many elements. Accordingly, you can also add absolute positioning for the necessary links. Your example is below:

.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.bottom-links {
  position: absolute;
  bottom: 30%;
  /* 
    left: 50% and translated(-50%) = centered on the X axis
  */
  left: 50%;
  transform: translateX(-50%);
}

.centered {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <img src="https://motionarray.imgix.net/preview-102627-XLeUsordYb-high_0015.jpg" style="width:100%; height: 100%;">
  <div class="bottom-links">
  <a href="{{url_for('login')}}"><font size = 5>Login Page</font></a><br>
  <a href="{{url_for('register')}}"><font size = 5>Register Page</font></a><br>
  </div>
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered"><font size = 10>Welcome to Asteroids+</font></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions