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!

css html if for while require using Property default this position viewport background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Get a Div's Background Image Dimensions Using jQuery?Next article：How to Get a Div's Background Image Dimensions Using jQuery?

Related articles

See more

• Summary of what you must pay attention to about Border when writing CSS
• How to realize multi-style selection and real-time switching of styles_Experience exchange
• Detailed usage analysis of marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别