How to Create a 50% Width Background Color in CSS Without Breaking Older Browser Compatibility?

CSS: Achieving a 50% Width Background Color

In web design, creating a background that covers only a portion of the screen, like 50% of its width, is a common requirement. However, the question arises: how do we achieve this without using methods that aren't supported by older browsers? This article explores alternative approaches for applying a background color that covers 50% of the window width.

Two-Color Background Using a Div

For browsers like IE7/8 that don't support background-size property, we can employ a workaround by creating a fixed div element:

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

This div, positioned fixed at the top left, fills half the screen with a background color, giving the desired effect of a two-color background. Adjust the background color as needed.

Linear Gradient for Modern Browsers

If support for older browsers is not a concern, we can utilize a linear gradient in the background property of the body:

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

This CSS creates a sharp division between two colors at the halfway mark, resulting in a background that seamlessly transitions from one color to another.

Multiple Backgrounds with Background-Size

For browsers that support background-size, we can combine a background color on the html element with a background image on the body:

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

This approach results in a background that covers 50% of the window width, utilizing either a solid color or an image.

Note: Ensuring Full-Screen Background

In all examples, setting the height of the html and body elements to 100% ensures that the background covers the entire viewport, even if the page content is shorter. This is a recommended practice for full-screen background effects.

The above is the detailed content of How to Create a 50% Width Background Color in CSS Without Breaking Older Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!