1

Existe alguma maneira de sobrepor uma ul de links a uma imagem?
A header da página em que estou trabalhando é feita por imagem mas os links devem ser feitos pelo html.. tem como sobrepor?
É uma header simples, com um menu que redireciona a outras páginas alinhado a direita e o logo alinhado a esquerda.. nada muito incomum, só não sei como sobrepor os links a imagem.
Alguma ideia?

EDIT: É como se meu header tivesse uma propriedade de background-color, mas essa background-color é uma imagem inteira, do tamanho da header (e será a header). Os links serão colocados dentro da header também, mas devem aparecer sobre a imagem, fazendo parte da header.

5
  • 1
    Considere fazer um tour e adequar sua questão como dito na central de ajuda
    – MagicHat
    Commented 14/08/2017 às 13:43
  • É possível, é simples. Mas ficou meio confuso quando disse "sobrepor os links a imagem". Você quer que as imagens sejam links? Você quer remover os links e inserir imagens no lugar? Explique melhor qual sua dúvida ou poste parte do código para implementarmos. Commented 14/08/2017 às 13:45
  • A pergunta realmente ficou um pouco confusa, mas como regra geral para sobreposição de elementos no DOM, utilize a propriedade z-index do CSS. A regra dessa propriedade é: elementos com um valor de z-index mais alto se sobrepõe a elementos de valor mais baixo: w3schools.com/cssref/pr_pos_z-index.asp Commented 14/08/2017 às 13:56
  • Se a imagem deve ficar atrás somente do elemento ul você também pode simplesmente colocar como background-image. w3schools.com/cssref/pr_background-image.asp Commented 14/08/2017 às 14:00
  • Editei a pergunta, tentei explicar melhor.. infelizmente não posso postar a imagem Commented 14/08/2017 às 14:04

2 Respostas 2

1

Basicamente o que eu fiz abaixo foi criam uma div para o header, colocar uma imagem em relative para poder posicionar a ul em absolute e posicionar centralizado. Segue o exemplo:

#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>

1
  • Legal, muito obrigado! Commented 14/08/2017 às 16:09
1

Acho que sua dúvida na verdade se resume ao css background-image

background: url("imagem-exibida-background.jpg") no-repeat 100%;
2
  • O único problema que vejo nesta solução, é que dependendo da imagem que ela está usando (que não o culpo já que ela não nos mostrou qual é), ela será dificilmente responsiva. Commented 14/08/2017 às 14:33
  • Exato, também tenho a responsividade para me preocupar Commented 14/08/2017 às 16:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .