Estoy tratando de crear una imagen de fondo de la página con una barra de navegación que flota en la parte superior de la imagen.

Estoy recibiendo un problema en el que la barra de navegación, empuja la imagen de abajo, la imagen se establece en el fondo del elemento html así que no sé por qué el navbar es tener este efecto.

Solo estoy usando el css directamente en el bootstrap página de introducción y sin la barra de navegación de la imagen se ajusta a la totalidad de la página, con la barra de navegación, que se encuentra por encima de la imagen y empuja hacia abajo:

Css:

html{
            /* This image will be displayed fullscreen */
            background:url('bg.jpg') no-repeat center center;

            /* Ensure the html element always takes up the full height of the browser window */
            min-height:100%;

            /* The Magic */
            background-size:cover;
        }

        body {
            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;           
        }

        .navbar {
            margin-top: 0px;
            margin-bottom: 0px;
        }

Html:

    <body>
    <div class="container">
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>

                </div><!-- /.navbar-collapse -->
            </div>
        </nav>
    </div>

El efecto que quiero terminar con una imagen de la página completa y la barra de navegación se sentó con la imagen que muestra en virtud de ello, no empujar la imagen de abajo con lo que se inicia después de la navbar.

InformationsquelleAutor berimbolo | 2016-02-01

3 Comentarios

  1. 5

    Aplicar las siguientes 2 líneas de CSS para el cuerpo lugar del elemento html:

     body {
                background:url('bg.jpg') no-repeat center center;
                background-size:cover;  
    
                /* Workaround for some mobile browsers */
                min-height:100%;    
                padding-top: 20px;
                padding-bottom: 20px;
            }    
    • Hola, gracias, esto ha funcionado, ¿por qué se hace en el cuerpo y no el html?
    • Hay un buen artículo acerca de las diferencias . Se debe proporcionar una respuesta detallada (mejor que puede en un corto comentario 🙂 ): css-tricks.com/html-vs-body-in-css
    • Gracias por la ayuda, y para la página web también!
  2. 2

    Dar fondo a body etiqueta.

    CSS:

    html{
    
             height: 100%;
             width: 100%;
    
           }
            body {
                /* Workaround for some mobile browsers */
                min-height:100%;    
                padding-top: 20px;
                padding-bottom: 20px;
                  /* This image will be displayed fullscreen */
                background:url('http://www.radioviva.fm.br/images/backgrounds/bg-squares-dark.jpg') no-repeat center center;
    
                /* Ensure the html element always takes up the full height of the browser window */
                min-height:100%;
    
                /* The Magic */
                background-size:cover;
            }
    
            }
    
            .navbar {
                margin-top: 0px;
                margin-bottom: 0px;
            }

    HTML:

Dejar respuesta

Please enter your comment!
Please enter your name here