HTML - Overlay a ul to an img

Asked

Viewed 818 times

1

Is there any way to overlay a ul of links to an image?
The header of the page I am working on is done by image but the links should be done by html.. has to overlap?
It is a simple header, with a menu that redirects to other pages aligned to the right and the logo aligned to the left.. nothing very unusual, just do not know how to overlay the links the image.
Any idea?

EDIT: It’s like my header has a background-color property, but this background-color is an entire image, the size of the header (and will be the header). Links will be placed inside the header as well, but should appear above the image, being part of the header.

html css img
  • 1

    Consider doing a [tour] and adjusting your question as stated on [help]

  • It’s possible, it’s simple. But it got a little confusing when I said "overlay the links to the image". Do you want the images to be links? Do you want to remove the links and insert images in place? Explain better what your question or post part of the code to implement.

  • The question really got a little confusing, but as a general rule for overlaying elements in the DOM, use the z-index property of the CSS. The rule of this property is: elements with a higher z-index value overlap with lower value elements: https://www.w3schools.com/cssref/pr_pos_z-index.asp

  • If the image should be behind only the element ul you can also simply put as background-image. https://www.w3schools.com/cssref/pr_background-image.asp

  • I edited the question, I tried to explain it better. unfortunately I can’t post the image

2 answers

1


Basically what I did below was create a div for the header, put an image in relative to position the ul in absolute and center position. Follow the example:

#header {
  position: relative;
}
img {
  width: 100%;
}
a {
  text-decoration: none;
  font-family: Tahoma, sans-seriff;
  color: gold;
  font-weight: bold;
}
#list {
  position: absolute;
  bottom: 1rem;
  text-align: center;
  width: 100%;
}
ul {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1rem;
}
li {
  display: inline;
  margin: 0 1rem;
}
<div id="header">
  <img src="http://www.debteraser.co.za/wp-content/uploads/2017/03/DE_banner-header.jpg" />
  <div id="list">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Exemplo 1</a></li>
      <li><a href="#">Exemplo 2</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </div>
</div>

  • Nice, thank you very much!

1

I think your doubt really comes down to css background-image

background: url("imagem-exibida-background.jpg") no-repeat 100%;

  • The only problem I see in this solution, is that depending on the image she’s using (which I don’t blame you for not showing us which one), she’ll be hardly responsive.

  • Exactly, I also have the responsiveness to worry about

Browser other questions tagged html css img

You are not signed in. Login or sign up in order to post.