Creating Split-Color Backgrounds with CSS

Sometimes you need a background that’s distinctly divided into two (or more) colors. This tutorial explores several CSS techniques for achieving this effect, ranging from simple linear gradients to more complex solutions that address older browser compatibility.

Understanding the Goal

The core idea is to create a background where different sections of an element are filled with different colors. This can be a clean 50/50 split, a more nuanced division, or even a diagonal color separation. We’ll explore how to accomplish this with modern CSS and how to work around limitations in older browsers.

1. Linear Gradients: The Modern Approach

The most straightforward way to achieve a split-color background is using CSS linear gradients. This provides a flexible and efficient solution for modern browsers.

body {
  height: 100%; /* Ensure the gradient covers the entire viewport */
  background: linear-gradient(90deg, #ff0000 50%, #0000ff 50%);
}

Here’s what’s happening:

linear-gradient(): This CSS function creates a linear gradient.
90deg: This specifies the direction of the gradient. 90deg creates a horizontal gradient (from left to right). You can experiment with other angles (e.g., 180deg for a vertical gradient).
#ff0000 50%: This sets the first color (#ff0000 – red) and its stopping point at 50% of the element’s width.
#0000ff 50%: This sets the second color (#0000ff – blue) and also its starting point at 50%. This creates a hard cutoff between the two colors.

Key Benefit: This is concise and effective, offering excellent control over color and direction.

Variations:

Vertical Split: background: linear-gradient(180deg, #ff0000 50%, #0000ff 50%);
Diagonal Split: background: linear-gradient(45deg, #ff0000 50%, #0000ff 50%);

2. Fine-Tuning Gradient Stops for Sharp Division

Sometimes, even with the 50% stop, gradients can exhibit a slight blend. To create a truly sharp division, you can use slightly offset stops:

body {
  background: linear-gradient(90deg, #ff0000 49.9%, #0000ff 50.1%);
}

By setting the first color to 49.9% and the second to 50.1%, you minimize any potential blending between the colors, achieving a crisper line.

3. Addressing Older Browser Compatibility

If you need to support older browsers like Internet Explorer 7 and 8 (which lack full support for CSS gradients), you’ll need a more complex approach. One technique involves creating a fixed-position div to represent the first half of the background.

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: pink; /* Or any color you want */
}

Explanation:

position: fixed: This keeps the div in a fixed position on the screen, even when scrolling.
width: 50%: This sets the width of the div to half of the screen width.
height: 100%: This makes the div fill the entire height of the viewport.

You would then need to ensure your other content is positioned correctly to appear on top of this background div and potentially manage z-index values. This solution adds an extra element to your HTML, which can affect page structure and may require adjustments to other styling.

4. Repeating Linear Gradient for Sharp Division (Advanced)

Another approach to achieve a crisp division that works with a wider range of browsers involves using a repeating linear gradient:

body {
  background: repeating-linear-gradient(
    to right,
    #74ABDD,
    #74ABDD 49.9%,
    #498DCB 50.1%,
    #498DCB 100%
  );
}

This creates a repeating pattern where the first color #74ABDD is applied up to 49.9% and then the second #498DCB is applied, with a slight overlap to create a sharp line. This is a more complex approach but can provide better cross-browser compatibility and avoids the need for extra HTML elements.

Best Practices

Use height: 100% on the html and body elements: This ensures the background covers the entire viewport, especially when using gradients.
Consider z-index: If you’re using a fixed-position background div, carefully manage z-index values to ensure your other content appears on top of it.
Prioritize modern techniques: If browser compatibility isn’t a major concern, use CSS gradients for a clean and efficient solution.
Test thoroughly: Always test your implementation in various browsers to ensure consistent results.