Cómo crear: navegación en la imagen

Cómo crear una navegación en la imagen

Primer paso - Añadir HTML:

Crear navegación:

<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Inicio</a>
      <a href="#news">Noticias</a>
      <a href="#contact">Contacto</a>
      <a href="#about">Acerca de</a>
    </div>
  </div>
</div>

Segundo paso - Añadir CSS:

Establecer estilo de navegación:

.bg-img {
  /* Imagen utilizada */
  imagen de fondo: url("img_nature.jpg");
  alto mínimo: 380 px;
  /* Centrar la imagen y ajustar el tamaño adecuadamente */
  posición de fondo: centro;
  repetición de fondo: no repetir;
  tamaño de fondo: cubrir;
  /* Necesita posicionamiento de navegación */
  posición: relativa;
{}
/* Colocar el contenedor de navegación dentro de la imagen */
.container {
  posición: absoluta;
  margen: 20 px;
  ancho: automático;
{}
/* Navegador */
.topnav {
  desbordamiento: oculto;
  color de fondo: #333;
{}
/* Enlaces del navegador */
.topnav a {
  flotar: izquierda;
  color: #f2f2f2;
  alineación de texto: centro;
  relleno: 14 px 16 px;
  decoración de texto: none;
  tamaño de fuente: 17 px;
{}
.topnav a:hover {
  background-color: #ddd;
  color: black;
{}

Prueba por su cuenta