Reply To: css background with 2 colors

[paulob]

Hi.

Your link above isn’t working I’m afraid.

Regarding your 50/50 background wouldn’t you need to fix the background with the code you are using or it will scroll away with content (unless you are only concerned with an initial viewport)?

e.g.

.prod1 {
  background-image: linear-gradient(to bottom, red, red 50%, white 50%);
  background-attachment:fixed;
  background-repeat: no-repeat;
}

You could do similar for IE9 with the :after element.

e.g.

html, body {
    margin:0;
    padding:0;
}
body { background:red; }
body:after {
    content:"";
    background:blue;
    position:fixed;
    top:0;
    bottom:50%;
    right:0;
    left:0;
    content:" ";
    z-index:-1;
}

It won’t work in IE8 (although it should) because IE8 won’t apply fixed positioning on generated content.