How Can I Create a Two-Colored Background That Occupies 50% of the Window Width, Considering Browser Compatibility?

CSS: Set a Background Color Which Takes Up 50% of a Window's Width

In an attempt to create a background that is split into two distinct colors on a web page, the background-color property has been employed on the body tag, while another is applied to a div that encompasses the window's entirety. However, the background-size property is incompatible with IE7/8, rendering this solution impractical.

Older Browser Support

For situations where older browsers pose limitations, consider employing a separate div element, positioned within the page, to achieve the desired effect:

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

Example: http://jsfiddle.net/PLfLW/1704/

This approach utilizes a fixed div that covers half the screen, remaining stationary even as users scroll. Some adjustments to z-indexes may be required to ensure other page elements are positioned correctly.

Modern Browsers

For browsers with more up-to-date support, consider these alternative methods:

Linear Gradient:

This technique is the most straightforward. By employing a linear-gradient in the body element's background property, various effects can be achieved:

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

Example: http://jsfiddle.net/v14m59pq/2/

Multiple Backgrounds with background-size:

Here, a background color is assigned to the html element, while a background-image is applied to the body. The background-size property is then utilized to set the image width to 50% of the page:

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;
}

Example: http://jsfiddle.net/6vhshyxg/2/

Additional Note:

In the examples for modern browsers, the html and body elements are both given a height of 100%. This ensures that even if the page content is shorter than the viewport, the background extends to the full height of the user's screen. It is generally considered good practice to set explicit heights for these elements.

The above is the detailed content of How Can I Create a Two-Colored Background That Occupies 50% of the Window Width, Considering Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!