Hintergrundbild erscheint unter NavBar

Question

Ich habe Probleme herauszufinden, wie man ein Hintergrundbild für meine Webseiten einstellt, ohne dass es meine Navbar beeinträchtigt. Es scheint, als ob das Bild für meine Navbar erscheint. Es scheint, als hätte ich ein Problem mit meinem CSS auf meiner Navigationsleiste? Ich bin ziemlich neu in HTML/CSS, also jede Hilfe würde geschätzt werden :).

Image Problem

html { 
 
    background: url(background-image.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
/* TOP-NAV CSS */ 
 

 
.navbar { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    line-height: 1.43; 
 
    color: #484848; 
 
    overflow-x: hidden; 
 
} 
 

 
.top-nav { 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.logo:link { 
 
    position: relative; 
 
    color: #484848; 
 
    display: inline-block; 
 
    transition: all 0.3s ease; 
 
    -webkit-transition: all 0.3s ease; /*Chrome/Opera/Safari */ 
 
    -moz-transition: all 0.3s ease; /* Firefox */ 
 
    -ms-transition: all 0.3s ease; /* IE */ 
 
} 
 

 
.logo:visited { 
 
    color: #484848; 
 
} 
 

 
.logo:hover { 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Image Logo */ 
 

 
.logo img { 
 
    position: relative; 
 
    padding: 16px 19px; 
 
    width: 100px; 
 
    border-right: 1px solid #ccc; 
 
    vertical-align: middle; 
 
} 
 

 
/* NAV-SEARCH CSS */ 
 

 
#nav-search-wrapper { 
 
    display: inline-block; 
 
    width: 490px; 
 
    height: 100%; 
 
} 
 

 
/* Search Bar Form */ 
 

 
#nav-search-wrapper form input { 
 
    padding: 18px 10px 18px 52px; 
 
    width: 100%; 
 
    border: none; 
 
    outline: none; 
 
    color: #666; 
 
    font-size: 14px; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    background-image: url('search-icon.svg'); 
 
    background-repeat: no-repeat; 
 
    background-position: 25px; 
 
    background-size: 18px; 
 
}

<div class="navbar navbar-default navbar-fixed-top"> 
 
    <header> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabe=no" /> 
 
    <link rel="stylesheet" type="text/css" href="header.css" /> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" /> 
 
     <div class="top-nav clearfix"> 
 
     <a href="" class="logo"> 
 
     <img src="" class="logo"/> 
 
     </a> 
 
     <div id="nav-search-wrapper"> 
 
      <form method="GET" action=""> 
 
      <input type="text" name="search" id="nav-search" placeholder="Search" /> 
 
      </form> 
 
     </div> 
 
     <ul> 
 
     <li><a href="">Ticket Form</a></li> 
 
     <li><a href="">Locations</a></li> 
 
     <li><a href="">About Us</a></li> 
 
     <li><a href="">Sign Up</a></li> 
 
     </ul> 
 
     </div> 
 
    </header> 
 
</div>

Answer 1

Wenn Sie Textfeld transparent werden soll. und Ihr Hintergrundbild für Ihre Websites, ohne dass es diese Navbar beeinträchtigt.

Dann

Opazität in Ihrer CSS-Datei hinzufügen.

Gefällt Ihnen dieses

#nav-search-wrapper { display: inline-block; width: 490px; height: 100%; opacity: 0.6; filter: alpha(opacity=60); } 

Answer 2

Try background-color: #fff und z-index Eigentum auf Ihrer .navbar zu setzen und sehen, ob es Ihren Hintergrund überlappen.

Überprüfen Sie diese aktualisierte Antwort. Alles funktioniert hier gut oder Sie posten alle Ihre Codes, damit wir herausfinden können, was das eigentliche Problem ist.

body { 
 
    // background: url(background-image.png) no-repeat center center fixed; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     background-size: cover; 
 
     background-color: #000; /* just to check if the background applies */ 
 
    } 
 
    
 
    /* TOP-NAV CSS */ 
 
    .navbar { 
 
     margin: 0 auto; 
 
     padding: 0; 
 
     font-family: 'Roboto', sans-serif; 
 
     font-weight: 400; 
 
     line-height: 1.43; 
 
     color: #484848; 
 
     overflow-x: hidden; 
 
     background-color: #fff; /* whole top bar will filled by white color */ 
 
    } 
 

 
    .top-nav { 
 
     position: relative; 
 
     width: 100%; 
 
     height: auto; 
 
     border-bottom: 1px solid #ccc; 
 
    } 
 

 
    .logo:link { 
 
     position: relative; 
 
     color: #484848; 
 
     display: inline-block; 
 
     transition: all 0.3s ease; 
 
     -webkit-transition: all 0.3s ease; 
 
     /*Chrome/Opera/Safari */ 
 
     -moz-transition: all 0.3s ease; 
 
     /* Firefox */ 
 
     -ms-transition: all 0.3s ease; 
 
     /* IE */ 
 
    } 
 

 
    .logo:visited { 
 
     color: #484848; 
 
    } 
 

 
    .logo:hover { 
 
     background-color: #f1f1f1; 
 
    } 
 
    /* Image Logo */ 
 

 
    .logo img { 
 
     position: relative; 
 
     padding: 16px 19px; 
 
     width: 100px; 
 
     border-right: 1px solid #ccc; 
 
     vertical-align: middle; 
 
    } 
 
    /* NAV-SEARCH CSS */ 
 

 
    #nav-search-wrapper { 
 
     display: inline-block; 
 
     width: 490px; 
 
     height: 100%; 
 
    } 
 
    /* Search Bar Form */ 
 

 
    #nav-search-wrapper form input { 
 
     padding: 18px 10px 18px 52px; 
 
     width: 100%; 
 
     border: none; 
 
     outline: none; 
 
     color: #666; 
 
     font-size: 14px; 
 
     box-sizing: border-box; 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     background-image: url('search-icon.svg'); 
 
     background-repeat: no-repeat; 
 
     background-position: 25px; 
 
     background-size: 18px; 
 
    }

<div class="navbar navbar-default navbar-fixed-top"> 
 
    <header> 
 
     <div class="top-nav clearfix"> 
 
      <a href="" class="logo"> 
 
       <img src="" class="logo" /> 
 
      </a> 
 
      <div id="nav-search-wrapper"> 
 
       <form method="GET" action=""> 
 
        <input type="text" name="search" id="nav-search" placeholder="Search" /> 
 
       </form> 
 
      </div> 
 
      <ul> 
 
       <li><a href="">Ticket Form</a></li> 
 
       <li><a href="">Locations</a></li> 
 
       <li><a href="">About Us</a></li> 
 
       <li><a href="">Sign Up</a></li> 
 
      </ul> 
 
     </div> 
 
    </header> 
 
</div>