So i'm building a bootstrap template and the problem I've encountered is trying to add a background image aligned to left side of site and a duplicate on the right side, it's like a small 40px width repeat-height type of pattern.
It is written like this and I know that is stupid but I've tried combinations of things and inside the bootstrap container, outside, etc.
#background-right {
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.containerbackgroundright {
background-image: url("../images/subtle_stripes.png");
height: auto;
max-width: 50px;
min-width: 0;
position: relative;
right: -15%;
}
ignore the stupid way I wrote that out. It is currently right after the <body> and before the <container>. What happens is the height of the repeat background only reaches about 75% of the page most times depending on how far the container stretches with the content of that page. It isn't the full 100% of the page.
If I change the position: to fixed it actually works but produces unwanted results because I don't want it fixed. It's width adjusts beautifully with bootstrap but the height doesn't extend as far as I want it, it just stops and then you have whitespace below it.
My guess is if I made an image out of the repeat pattern with like a 1600px height or something and gave a min-height/max-height this might solve but I'd prefer not to. Is there something I'm missing or can try?
So again, just want a sidebar aligned to left of page and another to right of page that can adjust fluidly so that it dissapears or hides behind the container of bootstrap (which is working) but I need it to be a full 100% height of page no matter how much the page stretches.