Padding neben Bild bei der Verwendung von Bootstrap/CSS

Question

Ich bin ziemlich neu in der Web-Entwicklung. Ich habe grundlegende Erfahrung mit html/css und verwende Bootstrap, um eine Website zu erstellen, nur um mich selbst zu unterrichten. Ich möchte, dass mein Bild die ganze Seite abdeckt, wenn ich die Größe des Browsers verkleinere, aber wenn ich den Vollbildmodus verwende, wird die Seite mit einem Padding versehen.

full screen example

Ich habe einige Dinge ausprobiert, um es zu beheben, wie padding Wechsel -20px oder machen Überlauf-x versteckt, aber kann nicht scheinen, um es zu beheben.

Bootstrap-Code

<div id="banner" class="container-fluid"> 
     <div class="col-lg-12 nopadding"> 
      <img src="images/headercopy.jpeg"> 
     </div> 
</div> 

CSS-Code

html, body { 
    line-height: 1.8; 
    background-color: rgb(0, 0, 0); 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

h3 { 
    text-align: center; 
    color: white; 
} 

.nav { 
    color: white; 
} 

.navbar-transparent .navbar-brand { 
    color: white; //nightalreadycolor 
} 

.navbar-collapse .page-scroll { 
    color: white; //nightalreadycolor 
} 

.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus { 
    background-color: transparent; 
    color: #c8e8f4; //light blue 
} 

.navbar .navbar-transparent .navbar-fixed-type { 
    background-color: red; 
} 

.container-fluid { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
} 

.aboutimage { 
    background-size: 100% 100%; 
} 

img { 
    display: block; 
    margin: 0 auto; 
    max-height: 100%; 
    max-width: 100%; 
} 

#about { 
    color: white; 
    height: 600px; 
    margin-right: 15px; 
    text-align: justify; 
} 

#about p { 
    display: block; 
    font-size: 20px; 
    margin-bottom: 1em; 
    margin-left: 0; 
    margin-right: 0; 
    color: white; 
} 

#about p img { 
    padding-top: 5px; 
    outline: solid #f00 1px !important; 
} 

.container {} 

#fleet { 
    border-right: thin solid black; 
    color: white; 
    width: 50%; 
    height: 600px; 
    float: left; 
    background-color: grey; 
} 

#fleet h1 { 
    text-align: center; 
} 

#fleet h2 { 
    padding-right: 10%; 
    float: right; 
} 

#rates { 
    color: white; 
    width: 50%; 
    height: 600px; 
    float: right; 
    background-color: #574951; 
} 

#rates h1 { 
    text-align: center; 
} 

#contact { 
    text-align: center; 
    height: 600px; 
    color: white; 
    background-color: #574951; 
} 

#reservation { 
    display: inline-block; 
    height: 600px; 
    color: white; 
    text-align: center; 
} 

Sorry, wenn einige meiner Code scheint überflüssig oder ineffizient zu sein, wie ich sagte, ich all dies noch sehr neu bin. Wenn es andere Informationen gibt, die du brauchst, lass es mich wissen.

Answer 1

Verwenden Sie Bilder als Hintergrund. Also, wenn es die #bannerdiv ist, die Sie füllen wollen, wird Ihre css so aussehen:

#banner { 
    background-image: url('images/headercopy.jpeg'); 
    background-size:  cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

Dann müssen Sie ihn nur Markup verwenden:

<div id="banner" class="container-fluid"></div> 

Natürlich können Sie einstellen, um Ihre css Code für die #banner die Höhe, die Sie wollen usw.