How to Create a 50% Window-Width Background Color Split in CSS?

CSS: Achieving a Background Color 50% of the Window Width

In web development, sometimes the need arises to create a background that is split in half, featuring different colors on opposite sides. Traditionally, this effect has been achieved by setting a default background color on the

tag and overlaying a

with an alternate background color that spans the entire window width.

Challenges with background-size Support

One approach to splitting the background is to use the background-size property, which allows for specifying the background image's size. This code snippet exemplifies this method:

body {
    background: #fff;
}
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

However, this solution is not viable for projects that require compatibility with Internet Explorer 7/8, as these browsers do not support the background-size property.

Solution Using a Dedicated Div Element

For older browsers, an alternative approach involves creating a separate

element with a fixed position:

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

This fixed div remains stationary while the page scrolls and creates the desired split-background effect.

Options for Modern Browsers

For projects that support modern browsers, additional techniques can be employed:

Linear Gradient:

Linear gradients offer an effortless way to split backgrounds. By using a linear-gradient in the background property of the

, you can create a hard cutoff at 50% for each color:

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

Multiple Backgrounds with background-size:

This method involves applying a background color to the element and then using a

background image with background-size set to 50% of the page width:

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

body {
    height: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Additional Note

To ensure that the background covers the entire viewport, it's recommended to set the height of both the and

elements to 100%. This guarantees that the background will extend down to the user's viewport, even if the page content is shorter.

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