Das hinzufügen eines hintergrund-Bild nur unterhalb der Navigationsleiste

Möchte ich hinzufügen, dass ein hintergrund-Bild (mit einem full-window-size-Breite) direkt unterhalb der Navigationsleiste. Es sollte nicht für die ganze Seite, die Länge, sondern beginnt direkt unterhalb der Navigationsleiste Menü, und geht nach unten bis zu einer bestimmten festgelegten Höhe. (aber die Breite ist voll).

Ich bezog mich auf den folgenden aber immer noch kein Ergebnis:
Starten einer hintergrund-Bild unten navbar in Twitter Bootstrap. Ich bin auch nicht mit jedem Bootstrap.

Dies ist, was ich programmiert haben, bisher aber keine Ergebnisse:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Numberz</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <nav>

       <img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;">

       <section style="margin-right: 150px;">
         <ul id="menu">
            <li><a href="#"><b>SIGNUP</b></a></li>
            <li><a href="#"><b>LOGIN</b></a></li>   
            <li><a href="#"><b>ACCOUNTANTS</b></a></li>
            <li><a href="#"><b>BLOG</b></a></li>
            <li><a href="#"><b>FEATURES</b></a></li>
            <li><a href="#"><b>PRICING</b></a></li>
         </ul>
       </section>

    </nav>

    <div id="backgroundimage"></div> //this is the division created for the background image

  </body>
</html>

CSS:

ul#menu li {
display: inline-block;
float: right;
position: relative;
margin-top: 28px; 
margin-left: 10px;
margin-right: 35px;

}

ul#menu li a {

text-decoration: none;
color: #808080;
font-family: "Helvetica Neue";
font-size: 15px;
}

#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}

Recht, jetzt sieht Es wie folgt aus:

Das hinzufügen eines hintergrund-Bild nur unterhalb der Navigationsleiste

Ich möchte so etwas wie dies:

Das hinzufügen eines hintergrund-Bild nur unterhalb der Navigationsleiste

Jegliche Hilfe würde sehr geschätzt werden.

InformationsquelleAutor Yoshita Arora | 2016-06-26

  1. 3

    Ich habe versucht deinen code. Ändern Sie diese Zeile:

    #backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}

    :

    #backgroundimage {
background-image: url("image3.png");
width: 100vw;
height: 100vh; 
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}

    und fügen Sie dieses in Ihre css:

    nav
{
overflow: auto;
}

    Hier ist ein Beweis, dass es funktioniert:
    Das hinzufügen eines hintergrund-Bild nur unterhalb der Navigationsleiste

    Dank eine tonne, funktionierte! 🙂
    du bist herzlich willkommen. Goodluck! 🙂

    InformationsquelleAutor Junmar Calimbas Jose

  2. 1

    Versuchen Sie dieses, es war ein Problem mit background-position,

    #backgroundimage {
background:url(1.jpg);
margin-top:80px;
margin-left:100px;
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: absolute;
background-position:center;
background-size:cover;
}
    vielen Dank, das hat funktioniert 🙂
    Willkommen @YoshitaArora 🙂

    InformationsquelleAutor frnt

  3. 0

    Ich denke, man sollte einfach die nav in ein div und das Bild in einem anderen div, so dass Sie sich getrennt

    Sie sollen veranschaulichen, mit einigen code-Beispiel.

    InformationsquelleAutor brahimm

Schreibe einen Kommentar