Making image positions responsive?

Question

I'm using bootstrap to make a small website and I've come to a halt. I want to add these two images at either side of the navbar, however, I can't figure out how to make the positions responsive. Here's an example of them working at one browser size.

Working

However, when it's at a different size then the images start to look something like this.

Not Working

I knew this would happen with the code I used as it sets it to a set location. I can't figure a different (better) way of doing this. Here's the CSS I used to get them to this position in the first place.

#wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 61px;
    z-index: 200;
}

#wrap-right {
    position: absolute;
    visibility: visible;
    left: 705px;
    top: 61px;
    z-index: 200;
}

And here's the HTML for the images

        <div id="wrap-left">
            <img src="assets/img/wrap-left.png">
        </div>

        <div id="wrap-right">
            <img src="assets/img/wrap-right.png">
        </div>

Thanks in advance.

EDIT: Using percentages makes it a lot better, however, it's not perfect.

EDIT: Will try messing around with @media queries when I get to my computer later. Hopefully that's my answer.

Answer 1

I found the answer to my problem. What I needed to do was use @media queries in my css for certain screen sizes. This was the code that I used to get around this problem.

@media only screen
and (max-width : 767px) {
    #wrap-left {
        display: none;
    }
    #wrap-right {
        display: none;
    }
}

@media only screen 
and (min-width : 992px) {
    #wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 81px;
    z-index: 200;
}
    #wrap-right {
    position: absolute;
    visibility: visible;
    left: 925px;
    top: 81px;
    z-index: 200;
}
}

@media only screen
and (min-width : 1200px) {
    #wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 89px;
    z-index: 200;
}
    #wrap-right {
    position: absolute;
    visibility: visible;
    left: 1125px;
    top: 89px;
    z-index: 200;
}
}


@media only screen 
and (min-width : 1824px) {
    #wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 89px;
    z-index: 200;
}
    #wrap-right {
    position: absolute;
    visibility: visible;
    left: 1125px;
    top: 89px;
    z-index: 200;
}
}

By using these media queries for certain screen sizes I was able to change where the image would be using it's ID and giving different screen sizes different places to put the images. However, at a certain point the page starts shrinking if it gets to small, so I get rid of the images at this point as there is not (that I have found) precise way of doing this.