Center a Background Jumbotron Image and Make it Mobile Responsive - html

Question

I have been fighting with a jumbotron background image which I managed to properly line up on the website but I can't seem to make it be mobile responsive. The link for the site is puremistdiffusers.com
Here is the HTML:
<div class="jumbotron" style="background-image: url(https://puremistdiffusers.com/wp-content/uploads/2017/02/slider-candle-jpeg-dark.jpg); background-repeat: no-repeat;">
<div class="container">
<h1 class="text-uppercase">YOUR AROMATHERAPY</h1>
<p>UP TO 40% OFF ON ALL PRODUCTS</p>
<a class="btn btn-default btn-inverse btn-lg text-uppercase topbutton" href="https://puremistdiffusers.com/product/" role="button">Shop Now</a>
</div>
</div>
and here is the CSS:
}
.jumbotron {
background-color: #fff !important;
}
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
height: 397px !important;
background-position: center;
width: 100%;
}
.jumbotron .container {
max-width: 100%;
}
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 50px !important;
text-align: center;
}
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-family: "Adobe Garamond Pro", "Adobe Caslon Pro", Helvetica, Arial, sans-serif;
font-size: 1.5rem;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 30px;
font-weight: 400;
color: #fff;
text-align: center;
}
.btn-default.btn-inverse {
color: #FFFFFF;
background-color: #162e00;
border-color: #FFFFFF;
}
.topbutton {
padding: 1% 6%;
font-size: 20px;
line-height: 2.375rem;
border-radius: 0.1875rem;
margin-left: 38%;
margin-top: 3%;
}
.btn:hover{
background:transparent;
color:#fff;
}
#media (max-width:768px){
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 30px !important;
}
.jumbotron p {
font-size: 17px;
}
.jumbotron {
height: 259px !important;
}
.btn {
margin-left: 30%;
}
}
#media (max-width:640px){
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 20px !important;
}
.jumbotron p {
font-size: 12px;
}
.jumbotron {
height: 259px !important;
}
.btn {
margin-left: 30%;
}
}
#media (max-width:480px){
.jumbotron h1, .jumbotron .h1 {
color: #fff;
font-size: 17px !important;
}
.jumbotron p {
font-size: 12px;
}
.jumbotron {
height: 259px !important;
}
.btn {
margin-left: 30%;
}
}
I tried several different techniques that I found here on stackoverflow but I would either get everything to line up on the left and not be centred or centre everything but loose the mobile responsiveness. Thanks in advance.

Answer 1

Ok , to add this lines :
.jumbotron {
background-image: url('your image background');
height: 100%;
width: 100%;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
and in your head tag in html add this :
<meta name="viewport" content="width=device-width, initial-scale=1">