Different background color either side of page

html css colors background tiling
Jesse picture Jesse · Jan 18, 2011 · Viewed 31k times · Source

I want to create a fixed-width layout where the background color on either side of the page is different, but with the background colours extending infinitely from either side of the page no matter how far you zoom out.

For example, I'm not looking to create a 9000x10 px image with the correct colours on either side and tiling it, as this would only work if you dont zoom out far enough to see the edge of the background image.

Is this possible?

Thanks!

Edit:

I should have specified, the background should cover the full height of the page, not just the height of the window/viewport.

Answer

Fred Nurk picture Fred Nurk · Jan 18, 2011

This seems to work:

<body>
<div id="bg-right"></div>
<!-- rest of page -->
</body>


body {
  background-color: purple;
}
#bg-right {
  background-color: yellow;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
}

Related questions

HTML: Changing colors of specific words in a string of text

I have the below message (slightly changed): "Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!" I currently have: <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> formatting the text …

Read More
Change color of bootstrap navbar on hover link?

I want to know how to change the color of the links when you hover over them in the nav bar, as currently they are an ugly color. Thanks for any suggestions? HTML: <div class="container"> <div …

Read More
Set a:hover based on class

I have the following HTML: <div class="menu"> <a class="main-nav-item" href="home">home</a> <a class="main-nav-item-current" href="business">business</a> <a class="main-nav-item" href="about-me">about …

Read More