Bootstrap: how to align images to the browser border?

Question

illustration of what i want

I want some divs to have corresponding images aligned to the browser border (to the left or right of each div).

Is there a way to do it without using JS?

As for now i use the image as background for container-fluid:

<div class="container-fluid diamondBG">
    <div class="container">
      <div class="row" style="text-align:center;">
        <div style="display:inline-block; float:none; text-align:left;" class="col-md-9">
            Some text
        </div>
      </div>
    </div>
  </div>

CSS:

.diamondBG{
    background-image: url('images/diamondLarge.png');
    background-position: right;
    background-repeat: no-repeat;
 }

This is not a solution as the bg image is cropped to the height of the div. The div's heigh must not be specified.

Answer 1

The solution is the image with "position:absolute" and "right:0" or "left:0" in container-fluid:

<div class="container-fluid">
    <img src="images\diamondLarge.png" style="position:absolute; right:0; margin-top:-60px;">
    <div class="container">
      <div class="row" style="text-align:center;">
        <div style="display:inline-block; float:none; text-align:left;" class="col-md-9">
            Some text
        </div>
      </div>
    </div>
</div>