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!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1671

14

CakePHP Tutorial

1428

52

Laravel Tutorial

1329

25

PHP Tutorial

1276

29

C# Tutorial

1256

24

Show More