BF2S Forums CSS Two-Tone Background

kylef wrote:

Figured it would be best to post here:

I'm looking to create a two-tone background (bottom 50% and top 50% being different colours) in CSS. Can anyone lead me in the right direction?Having a bit of a hard time getting it right.

Thanks

Scorpion0x17 wrote:

kylef wrote:

Figured it would be best to post here:

I'm looking to create a two-tone background (bottom 50% and top 50% being different colours) in CSS. Can anyone lead me in the right direction?Having a bit of a hard time getting it right.

Thanks

Just to clarify, is that CSS as in Cascading Style Sheets?

div {
 background-image: 2-tone.png;
 background-repeat: repeat-x;
}

<div class='container'>
 <div class='backgroundTop'></div>
 <div class='backgroundBottom'></div>
 ... other content here...
</div>

div.container { position: relative; }
div.backgroundTop { position: absolute; top: 0; left: 0; bottom: 50%; right: 0; background-color: top_color; }
div.backgroundBottom { position: absolute; top: 50%; left: 0; bottom: 0; right: 0; background-color: bottom_color; }

Last edited by Scorpion0x17 (2009-02-25 13:53:33)

Zimmer wrote:

Scorpion0x17 wrote:

Code:

div {
 background-image: 2-tone.png;
 background-repeat: repeat-x;
}

But, if the the div (or whatever) can be any height, then you need to make the container non-static, drop in two positioned (absolute) divs, and size and colour those, as appropriate.

Summat like:

in the HTML:

Code:

<div class='container'>
 <div class='backgroundTop'></div>
 <div class='backgroundBottom'></div>
 ... other content here...
</div>

then in the CSS:

Code:

div.container { position: relative; }
div.backgroundTop { position: absolute; top: 0; left: 0; bottom: 50%; right: 0; background-color: top_color; }
div.backgroundBottom { position: absolute; top: 50%; left: 0; bottom: 0; right: 0; background-color: bottom_color; }

(where, obviously, 'top_color' and 'bottom_color' should be replaced with the desired color # or RGB code)

That's wrong. It should be

Code:

background-image: url(2-tone.jpg);

And your CSS is completely wrong for what he wants.

First of all, when you absolutely position something, it needs to have a defined height. This will show absolutely nothing. Second, you positioned both DIVs at the exact same position : 50% on the browser. Third, creating a relative position DIV outside is completely useless if you aren't going to define a specific width for that and then move your absolutely positioned DIVs around that. An absolute position can only be used in conjuction with a height and width, and you also don't need to define each axis. "top:50%" should suffice. Not that it would make a difference.

Last edited by Scorpion0x17 (2009-02-25 14:12:02)

Zimmer wrote:

lol.

I wasn't saying it in a condescending tone. No need to bite back.

Zimmer wrote:

Take out the content ( the text ), you will see why it doesn't work. The container part is just an extra though. It needs to work without content. Even with content, it will never span the whole browser page simply because it has no defined height and will expand depending on the content.

Zimmer wrote:

The only way to get something close to a 2 tone bg is by doing a background attachment and shoving it at the bottom and keeping something at the top. Even then, once you resize the browser window to a size that is too small, one of the parts ( top or bottom, depending on which you made fixed with background attachment ) will start to get larger.

kylef wrote:

Scorpion0x17 wrote:

To make the text show through, in my 2nd solution, you need to add "z-index: -1;" to the two background div styles, thus:

Code:

div.container { position: relative; }
div.backgroundTop { position: absolute; top: 0; left: 0; bottom: 50%; right: 0; background-color: top_color; z-index: -1; }
div.backgroundBottom { position: absolute; top: 50%; left: 0; bottom: 0; right: 0; background-color: bottom_color; z-index: -1; }

With regards to top_color and bottom_color do they require images or will hex do?

Zimmer wrote:

Scorpion0x17 wrote:

Zimmer wrote:

The only way to get something close to a 2 tone bg is by doing a background attachment and shoving it at the bottom and keeping something at the top. Even then, once you resize the browser window to a size that is too small, one of the parts ( top or bottom, depending on which you made fixed with background attachment ) will start to get larger.

Exactly. My 2nd solution solves that problem. And it works.

What works? The background colours will still never span across the entire browser.... I don't get what you solved.... Other than the text being infront of the divs.

Last edited by Scorpion0x17 (2009-02-25 14:44:20)

Zimmer wrote:

Scorpion0x17 wrote:

What do you mean?

Divs automatically span the width of the container.

Or do you mean the background doesn't cover the whole height of the browser window?

If so, no - it doesn't - it covers the entire height of the content.

That's why. I think he wants something that spans the height of the browser window, not just the content.

Zimmer wrote:

Scorpion0x17 wrote:

... of the container.

As I said before, to make it cover the entire window, you use the <body>...</body> as the container.

(i.e. just remove the container div)

Nah man, that doesn't work.