Formatting links so that they appear on top of an image in CSS

Question

I making a website in which I am attempting to place some links of other web pages on top of an image, sort of like a navigation bar. So far I have been experimenting with position property and trying to modify the div tags of my HTML, however, nothing seems to be getting the desired result.

Here is relevant HTML & CSS:

.content {
  position: relative;
  color: #eaeaea;
  text-align: left;
}

.navigation {
  padding: 10px;
  float: left;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.navigation a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.navigation a:hover {
  background: #61ba48;
  color: #ffffff;
}

.subscribe {
  padding: 10px;
  float: right;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.subscribe a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.subscribe a:hover {
  background: #61ba48;
  color: #ffffff;
}

.Title {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: #61ba48;
  padding-left: 20px;
  padding-right: 20px;
  width: 200px;
  opacity: 0.8;
}

<div class="content">
  <img src="background.jpg" alt="Background" style="width: 100%;">
  <div class="Title">
    <h1 style=f ont-size:70px>IFN</h1>
    <p>Title</p>
  </div>
</div>

</div>

<hr>
<div class="navigation">
  <a href="pg1.html"> Home</a>
  <a href="pg2.html"> pg2</a>
  <a href="pg3.html"> pg3</a>
  <a href="pg4.html"> pg4</a>
</div>



<div class="subscribe">
  <a href="register.html"> Subscribe </a>
</div>

Here is what it looks like now:

And here is what I am trying to achieve:

can you please put it in jsfiddle so we can test? – Milan Bastola Jun 01 '18 at 18:26 — Milan Bastola, Jun 01 '18 at 18:26
Can you also post a screenshot of the desired result ? – Martin Jun 01 '18 at 18:26 — Martin, Jun 01 '18 at 18:26
I have added screenshots @Martin – Sputn1k Jun 01 '18 at 18:38 — Sputn1k, Jun 01 '18 at 18:38

score 0 · Answer 1 · answered Jun 01 '18 at 18:34

Two ways come to my mind to accomplish this.
1. Using absolute position. This is easy. I understand it could be something you do not want to do.
2. Some "very bad" things (see best answer): How to put text over an image without absolute positioning or setting the image as backbround. (I am not sure if it still works well)

Edit: Seeing the desired result now, I think you can use absolute positioning. Also, you could set the image as background if that also gives you the expected result.

Hope it helps

score 0 · Accepted Answer · answered Jun 01 '18 at 19:28

I would suggest you wrap those links in a div and set that image as the background for that div.

Or make .content absolute with a less z-index value than the links.

.content {
  position: absolute;
  /* Changed from relative to absolute */
  z-index: -1;
  /* Added */
  color: #eaeaea;
  text-align: left;
}

.navigation {
  padding: 10px;
  float: left;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.navigation a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.navigation a:hover {
  background: #61ba48;
  color: #ffffff;
}

.subscribe {
  padding: 10px;
  float: right;
  margin: 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.subscribe a {
  float: left;
  display: block;
  color: #61ba48;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #dee0de;
}

.subscribe a:hover {
  background: #61ba48;
  color: #ffffff;
}

.Title {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: #61ba48;
  padding-left: 20px;
  padding-right: 20px;
  width: 200px;
  opacity: 0.8;
}

<div class="content">
  <img src="http://via.placeholder.com/2000x850" alt="Background" style="width: 100%;">
  <div class="Title">
    <h1 style=f ont-size:70px>IFN</h1>
    <p>Title</p>
  </div>
</div>



<hr>
<div class="navigation">
  <a href="pg1.html"> Home</a>
  <a href="pg2.html"> pg2</a>
  <a href="pg3.html"> pg3</a>
  <a href="pg4.html"> pg4</a>
</div>



<div class="subscribe">
  <a href="register.html"> Subscribe </a>
</div>

Ok, I see what have you done in the CSS, and thanks, but the HTML file looks the same, does that mean that the divs are fine as they are? — Sputn1k, Jun 01 '18 at 19:32
Yes the html works fine, setting absolute to the .content means taking it out of the document flow, as if it's not there, so the other element ignore it's existence and so by setting `z-index:-1` as in the z axis,it appears behind them. — Rainbow, Jun 01 '18 at 19:45

Toolbox · Answer 3 · 2018-06-01T19:51:53.237

See attached code snippet. Moved the background image to CSS. This solution does not require z-index nor position: absolute / relative.

Added some opacity to the background of your link square boxes, since the background image is being picked randomly thus it might be difficult otherwise to se the black text of your links.

I suggest you also introduce CSS grid to better control the layout.

body {
  background-image: url("http://source.unsplash.com/random/800x200");
  background-repeat: no-repeat;
}

.nav {
border: 2px solid black;
width: 40%;
height: 10px;
padding: 0px 10px 40px 10px;
margin: 0px 0px 0px 10px;
float: left;
background-color:rgba(255, 255, 255, 0.5)
}

.nav ul a {
  margin: 5px;
  color: black;
  text-decoration: none;
}

.subscriber ul a {
  margin: 5px;
  color: black;
  text-decoration: none;
}

.subscriber {
border: 2px solid black;
width: 20%;
height: 10px;
padding: 0px 10px 40px 10px;
margin: 0px 120px 0px 10px;
float: right;
background-color:rgba(255, 255, 255, 0.5)
}

  <div class= "nav">
    <ul>
       <a href= "pg1.html"> Home</a>
       <a href= "pg2.html"> pg2</a>
       <a href= "pg3.html"> pg3</a>
       <a href= "pg4.html"> pg4</a>
      </ul>
   </div>

   <div class= "subscriber">
     <ul>
        <a href= "pg1.html"> Subscribe</a>
      </ul>
    </div>

score 0 · Answer 4 · answered Jun 01 '18 at 20:10

Try to study this code for positioning absolute.

.imgWrapper {
  position: relative;
  /* so child's position absolute (top, bottom, left, right), 
will by relative to .imgWrapper */
  width: 350px;
  height: 160px;
  /* controlling size of img */
}

.imgWrapper img {
  width: 100%;
  /* fill imgWrapper 100% with image */
  height: 100%;
}

.imgWrapper .topLeft {
  position: absolute;
  top: 0;
  /* play with this to move box */
  left: 0;
  /* play with this to move box */
}

.imgWrapper .topRight {
  position: absolute;
  top: 0;
  right: 0;
}

.imgWrapper .bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.imgWrapper .bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}


/* tempolary colors */

.topLeft {background: #f00;}
.topRight {background: #0f0;}
.bottomLeft {background: #0f0;}
.bottomRight {background: #f0f;}

/* temporary box size */
.topLeft,
.topRight,
.bottomLeft,
.bottomRight {
  width: 50px;
  height: 20px;
}

<div class="imgWrapper">
  <img src="http://via.placeholder.com/300x150">
  <div class="topLeft"><!--Put here something--></div>
  <div class="topRight"><!--Put here something--></div>
  <div class="bottomLeft"><!--Put here something--></div>
  <div class="bottomRight"><!--Put here something--></div>
</div>

Formatting links so that they appear on top of an image in CSS

4 Answers4