Mohamed Hegazy Mohamed Hegazy - 7 months ago 26
HTML Question

how can I make a background image take the whole width of the screen in Bootstrap?

I was using Bootstrap to create my first website, however the background image in Jumbotron div does not fill the whole width of the screen leaving a narrow margin on both sides, I have tried changing padding, margins, and change width of the div to 100% but it didn't work.



<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
</head>



<body>


<div class="container-fluid">


<!--Navbar start........................-->
<nav class="navbar navbar-inverse navbar-fixed-top navbarheight">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#" id="myname">Mohamed Hegazy</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">

<ul class="nav navbar-nav allnavicons">
<li class="active navicon"><a href="#">About</a></li>
<li><a href="#about" class="navicon">Portfolio</a></li>
<li><a href="#contact" class="navicon">Contact</a></li>
</ul>

</div><!--/.nav-collapse -->
</div>
</nav>
<!--Navbar end..........................-->



<!--jumbotron container start..........................-->

<div class="jumbotron">
<div class="container">
<h1 id="welcome">Welcome to my Portfolio!</h1>
<p></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>


<!--jumbotron container end..........................-->




</div>




<style>

body{
background-color:#ffe6e6;
}

.navbarheight{
height:60px;

}


#myname{
margin-left:0px;
font-size:45px;
}

.allnavicons{
margin-right:50px;

}
.navicon{
font-size:25px;
margin-right:30px;
}

.jumbotron{
width:100%;

background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ-H9Giy0rTSpFwziVBPYtGvAPNcDjSTbQpZDJvVV2vXQ6DClHdOQ")

}


#welcome{
text-align:center;
padding-top:30px;
}

</style>
</body>

</html>




SRD SRD
Answer

add this to your CSS code :

  .container-fluid{
    padding:0;
  }
Comments