I have found tons of topics about this, but nothing seems to work out.
My website consists of a main div, with all the content that takes 80% of the screens width. A div with a background is sticked to each side of the div, with a absolute position, like so:
Now, the side divs have an background-repeat: repeat-y
style applied to it. The height of the html is 100%, and what I want works in all browsers, EXCEPT IN INTERNET EXPLORER (even in Edge, but I understood that it processes HTML and CSS differently from IE) (frustrations, sorry).
The code:
.bg-left {
background: transparent url("../images/background/bg_left.png");
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
width: 100px;
top: 0;
left: -100px;
}
.bg-right {
background: transparent url("../images/background/bg_right.png");
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
width: 100px;
top: 0;
right: -100px;
}
Is there somebody who can help me out?
Thanks in advance
-- JSFIDDLE --
https://jsfiddle.net/fwah7gr6/12/
So, this is the context of my website. There a 'banners' on each side of the website, but what happens in IE, is that those banners stop repeating after you scroll down (it seems like those banners take the height of the screen and not the parent (which is 100% in height). In the JSFiddle this of course works, because that would be normal behaviour. Let's say the page-wrapper has an height of 4000px in total, the banners only take the height of from the top to the bottom of screen height. When I open a console, and push the console up, the banners also get pushed up...