How to Create a 50% Window-Width Background Color Split in CSS?-CSS Tutorial-php.cn

Table of Contents

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

Challenges with background-size Support

Solution Using a Dedicated Div Element

Options for Modern Browsers

Additional Note

Home

Web Front-end

CSS Tutorial

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

Dec 13, 2024 pm 08:22 PM

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 <body> tag and overlaying a <div> 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%;
}

Copy after login

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 <div> element with a fixed position:

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

Copy after login

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 <body>, you can create a hard cutoff at 50% for each color:

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

Copy after login

Multiple Backgrounds with background-size:

This method involves applying a background color to the <html> element and then using a <body> 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;
}

Copy after login

Additional Note

To ensure that the background covers the entire viewport, it's recommended to set the height of both the <html> and <body> 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!

Statement of this Website

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