Q: unable to position background image correctly I'm trying to position a background image so it stays proportional/adaptive to screen size and not float into the nav bar.  The css I'm using is:
#apology{
background-image:url('http://i.imgur.com/jkXf9IE.png');
width:50%;
margin:0 auto;


background-position:50% 50%;
background-size:cover;


position:fixed;
left:10%;
top:10%;
right:10%;
bottom:10%; 

}

Here's a fiddle background-image

A: update css of top, fixed it with pixel not with percentage 
#apology {
    background-image: url(http://i.imgur.com/jkXf9IE.png);
    width: 50%;
    margin: 0 auto;
    background-position: 50% 50%;
    background-size: cover;
    position: fixed;
    left: 10%;
    top: 52px; //update this
    right: 10%;
    bottom: 10%;
}

working jsfiddle 

A: Something like this?
#apology{
    background-image:url('http://i.imgur.com/jkXf9IE.png');
    margin:0 auto;
    background-position:50% 50%;
    background-size:cover;
    position:fixed;
    top:50px;
    bottom: 0;
    left: 15px;
    right: 15px;
}

If you want the badge to be fully visible in all cases. Even when the browser window is really narrow, then you will have to change the image. Create a png image only with the badge on a transparent background and add the blue as the background color in css.

A: 1.) the width and margin contradict the fixed position and its top/left/right/bottom parameters. That for the element itself.
2.) The background position contradicts the cover size. background-position:50% 50%; places the left upper corner of the background image at the center of the container, which can't be what you want. Just erase that and only use background-size: cover;and background-attachment: fixed
