Jump to content

CSS Split Colour Backgrounds Without Using Frames


Genki Dave

Recommended Posts

Hey there, I'm new to CSS, so please speak laman's terms if possible. :):(Problem :D I'm designing a web page where I need 50% (right side) of the page's background color to be red and the other 50% (Yup, you guessed it! The left side) to be plain white, but I can't use frames, due to the fact that I have text and an image at the very top that needs to be centered not matter what resolution the visitor is viewing it in, or browser.I've tried and tried, and tried again, but no matter what I do, I can't split the page with 50% of both colors for right and left. :) Any suggestions? :blink: ThanksGenki Dave :)

Link to comment
Share on other sites

create a background image, with one side red and the other white. When you put it into your body tag if the resolution is larger than the image itself, then the image should just be stretched, which won't ruin anything pixel wise.

Link to comment
Share on other sites

I believe background-images do not stretch, not until CSS3 anyway.Here, try this:CSS:

html, body {   background-color: white;   height: 100%;   margin: 0;}#half2 {   background-color: red;   position: absolute;   left: 50%;   width: 50%; height: 100%;}#content {   position: absolute;}

HTML:

<body>   <div id="half2"></div>   <div id="content">      Place content here   </div></body>

Link to comment
Share on other sites

Well F-Man, it work!Now the new problem is, the graphic at the top along with the text (Main Title) are bothchopped in half! :) On the right had side (red side) the background is red, GREAT! But now I have to figure out a way to get ALL of my graphic and title at the top without being chopped, but that was an awesome trick dude, THANKS!! :) Can you help on this new issue?Genki Dave

Link to comment
Share on other sites

Well F-Man, it work!Now the new problem is, the graphic at the top along with the text (Main Title) are bothchopped in half!  :) On the right had side (red side) the background is red, GREAT!  But now I have to figure out a way to get ALL of my graphic and title at the top without being chopped, but that was an awesome trick dude, THANKS!!  :) Can you help on this new issue?Genki Dave

Hm, that's weird.I noticed there was something I forgot in my code: give the #content div a width of 100%. Though I don't see how that is causing problems with graphics being chopped... You're putting everything inside the #content div right?
Link to comment
Share on other sites

Almost there. I think I'll start from scratch though. I made some changes, and they worked, but thecenter of the backbgrounds of red and white were shifting when I tested to see if I made the browser winder smaller. The top graphic stayed fixed, but the center of the two colored backgrounds shifted. Wierd!Genki Dave

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...