Resize background image depending of a viewport size - css

Question

I'm new to bootstrap. I have simple page with a header (which has background image) and logo.
I have two questions
How to hide background image of the header tag and center the logo if <768px
How to resize the background image depending of the viewport size?
Here's the code I have
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<img src="images/logo.png" alt="" />
</header>
</div>
</div>
</div>
css
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
}

Answer 1

Use like this:
For hiding background image of the header tag and center the logo:
CSS:
#media (max-width: 767px) {
body header {
position: relative;
width: 940px;
height: 200px;
background: none;
margin:0 auto;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
display: none;
}
}
try background-size:contain; for resizing your image
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
background-size:contain;
}

Answer 2

It is always clearer if you provide jsfiddle or codepen with your actual code.
When you already have a container class on top, you don't really have to define another header with static width. Either it can be 100% or use container class on header. Your structure can basically be reduced to this form.
HTML:
<header class="container">
<figure>
<img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" class="img-responsive" alt="logo">
</figure>
</header>
CSS:
* {
box-sizing: border-box;
}
header {
width: 100%;
background: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 200px;
border-bottom: 1px solid #999;
position: relative;
padding: 30px 0;
figure {
max-width: 200px;
margin: 0px auto;
position: relative;
}
#media (max-width: 768px) {
& {
background: none;
min-height: auto;
figure {
img {
margin-top: 00%;
}
}
}
}
}
http://codepen.io/gorkhali/pen/azjVev