How Can I Create a Two-Colored Background in CSS, with One Color Occupying 50% of the Window Width?

CSS: Set a Background Color Which is 50% of the Width of the Window

Problem:

Seeking a way to split the background of a page into two different colors, with one color occupying 50% of the window's width.

Solution:

Older Browser Support

In cases where legacy browser support is essential (e.g., IE7/8), consider utilizing a dedicated div element to achieve the desired effect:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink;
}

The div, positioned fixedly, fills half the screen and remains in place while scrolling.

Modern Browsers

For modern browsers, several alternative methods are available:

Linear Gradient

Leveraging a linear gradient in the body's background property provides a straightforward solution:

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

This creates a sharp division between colors at the 50% mark.

Multiple Backgrounds with background-size

Assigning a background color to the html element and applying a background-image with a 50% background-size setting to the body element yields a similar result:

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Note: In the latter examples, height: 100% is set for both html and body to ensure the background spans the entire viewport, regardless of page content height.

The above is the detailed content of How Can I Create a Two-Colored Background in CSS, with One Color Occupying 50% of the Window Width?. For more information, please follow other related articles on the PHP Chinese website!