Wsrtjtyk

well, I didn't know how to give a better title for this.
I am using a custom theme based on Bootstrap in Drupal, and I'm having a css issue:
The main container is full-width with a little margin on the sides, and its background is visually divided in 12 columns, like this:

.main-container {

  width: 100%;

  margin-left: 15px;

  margin-right: 15px;

  border-right: 1px solid #efefef;

  background: repeating-linear-gradient(to right, #efefef, #efefef 1px, #fff 1px, #fff 8.333333333333%);

}

Now, I need to fill 3 of those columns with a repeated image; namely, the 9th, 10th, and 11th column (all together as a single space, not each one separately). This filled space must begin and end exactly at the left edge of the 9th column and end at the right edge of the 11th column.

I tried adding:

main-container {

  position:relative;

}



main-container:before {

  content: "";

  position: absolute;

  top: 0;

  left: 66.666666666%; /* the width of 9 columns out of 12, with a negative offset of a column; basically: 75% - 8.333333333% */

  width: 25%; /* 3 columns out of 12 */

  height: 100%;

  background-image: url("../images/test-img.jpg");

  background-repeat: repeat;

}

Can this be alright, or is there a simpler/optimal way?
Could that main-container:before get in the way with z-indexes later on?
Other issues?