skhan skhan - 1 month ago 11
CSS Question

padding beside image while using bootstrap/css

I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.

full screen example

i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.

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 if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.

Answer

Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:

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

Then you just have to use this markup:

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

Of course you can set to your css code for the #banner the height you want etc.