how to style the body 50% black and 50% white

**floriauck** · Jun 21, 2006 06:07

hi,

I am trying to style the body 50% white from the top and 50%black from the middle to the bottom. Whats the best way of doing that with CSS. I know how to style the background one color but am not sure how to go about having two. I was thinking of maybe giving the body one color and then use a background image for the other color. Position the image and repeat it??

ok, attached is a screenshot of what I am trying to achieve.
thanks for any help,
florian

**gl3nnx** · Jun 21, 2006 06:16

hmm, In my humble opnion, i think the safest way is to create a 1000 pixel height and 10 pixel width image, the upper part is white, and the bottom is black.. and start to insert it in ur CSS , body tag.

**floriauck** · Jun 21, 2006 06:19

not sure if that method lets me have the 50% white on the top and the 50% black on the bottom when people have different screen sizes and different resolutions. do you know what I mean?

**Paul O'B** · Jun 21, 2006 06:29

Hi,

You may need to explain exactly what you want to do but at the simplest level you could do something like this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html { height: 100%;}
/* end hide */
body {
background: #000; 
color: #fffccc;
height:100%;
}
#outer {
height: 50%;
background:#fff;
position:absolute;
left:0;
top:0;
width:100%;
}
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

**floriauck** · Jun 21, 2006 06:46

YES. this is exactly what I was trying to do. I also found another way of doing it with a background image. And then use the background-position and the background-repeat tag. But your method works great.

So pretty much you styled the body black and then put a div in the body, called it "outer" and then styled it white, positioned it 50% from the top and 100% all the way across. Great! I just tested it, it works both in firefox and in IE.
Thanks you very much. These are my first steps in css. Very exciting!

**Paul O'B** · Jun 21, 2006 06:53

Or if you want to use an image as suggested by gl3nnx you could do it this way (again depending on exactly what you are trying to achieve.)

http://www.pmob.co.uk/temp/blackandwhite4.htm

Or if you want it horizontal

http://www.pmob.co.uk/temp/blackandwhite1.htm
http://www.pmob.co.uk/temp/blackandwhite2.htm
http://www.pmob.co.uk/temp/blackandwhite3.htm

**Paul O'B** · Jun 21, 2006 06:55

But your method works great

It will depend on what you expect to happen when you add content though.

The image solution (posted above) uses fixed posistioning so that content can flow freely but the background stays fixed which I think may be what you are aiming for.

**floriauck** · Jun 21, 2006 08:34

exactly. I am using the image solution because I want the content to flow. This is what I am working on right now. I am trying to center a div that contains my logo in the center. I want it centered vertically an horizontally. I am close but its not quit right i think because when I resize the browser it doesnt stay right in the middle. Here is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Black and White</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
body {
background: #000 url(Sliced-images/black-white.jpg) repeat-x fixed 0 50%;
color: red;
}
div#logo {
border: 0;
height: 166px;
width: 471px;
position: absolute;
left: 40%;
top: 40%;
}
</style>
</head>
<body>
<div id="logo">
<img src="sliced-images/logo.gif" width="471" height="166" alt="Logo"/>
</div>
</body>
</html>

any thoughts?

ps: how do I enclose the code in the post so its better legible?

**Paul O'B** · Jun 21, 2006 09:33

Hi,

You need to go 50% 50% and then use negative margins left and top to center the uimage exactly.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Black and White</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
html,body {height:100%}
body {
background: #000 url(Sliced-images/black-white.jpg) repeat-x fixed 0 50%; 
color: red;
}
div#logo {
height: 166px; 
width: 471px;
position: absolute; 
left: 50%; 
top: 50%;
margin-left:-235px;
margin-top:-83px;
}
div#logo img{border:none;display:block}/* to stop gap appearing under image*/
</style>
</head>
<body>
<div id="logo">
<img src="sliced-images/logo.gif" width="471" height="166" alt="Logo"/>
</div>
</body>
</html>

The details are explained in the faq on centering

**floriauck** · Jun 21, 2006 10:02

wow. that sure centers it in firefox. Exactly they way I want it. For some reason though, in IE its a little bit of centered on the vertical axis. Its a bit to far down.

here is a visual:
first one is firefox
second one is IE

**Paul O'B** · Jun 21, 2006 10:41

Hi,

It will center it in ie as you can see from my example here:

http://www.pmob.co.uk/temp/blackandwhite5.htm

In your IE picture you have a vertical scrollbar and therefore the page has scrolled and the image has moved off center.

As I said earlier you may need to explain what you want to happen and what you are going to add to the example. If you are going to add more content and still want that black and white background and the image centred and fixed (i.e. not move when content scrolls) then you will need to go about this in a different way as ie will not allow fixed elements other than as body background images.

**floriauck** · Jun 21, 2006 10:52

absolutely.

attached is the final design in photoshop. thats what I am trying to do. I want it to be fluid. The black and white background with the logo always in the middle. The flowers I think I want to stay on the left and on the right site but always stay centered vertically. The pictures in the top left corner should stay there too. The content (works, service, contact) will be an unordered list (ul). Of course I am trying to make it work for the main browsers. IE, firefox, safari.

this is my very first attempt with css. I am kind of using it as a first hands on learning project. I did the css for designers course at lynda.com. However seeing it and doing it yourself are two totally different things

**Paul O'B** · Jun 21, 2006 14:18

Hi,

I don't think whay you are trying to do is possible cross browser in a viable way.

The centered logo and background is fine for a splash page but a centred site is not viable for a fluid page for a number of reasons. For example if the page content is long and the page is centred then on small screens you will lose the top and bottom of the layout. The top will be inaccessible but you will be able to scroll to the bottom. However when you scroll to the bottom the page content wil move up of course and therefore be mis-aligned with the background image.

Using some complicated hacks I have managed this in ie and it more or less works in firefox but opera doesn't like it.

http://www.pmob.co.uk/temp/blackandwhite6.htm

I think you would be better off either putting the design at a set distance from the top with a fixed pixel distance or otherwise you will need to have a defined width and height for your page content so that you can place it exactly. You will still have the issues when the screen is smaller than the page though unless you set min-widths and height but then the background will slide off anyway.

That's about as much as I can do today

**floriauck** · Jun 22, 2006 06:14

Man, I thought this would be a very easy thing to do in CSS but having a cross browser design isnt easy, no matter how simple the design may seem. I did some changes to the design yesterday night while trying to keep css and the browsers in mind. Can you have a look at this design and let me knwo if that would be better as far as the css and the cross browser goes.

**Paul O'B** · Jun 22, 2006 07:16

no matter how simple the design may seem.

The problem is that you are thinking in terms of paper and pen and a design on paper is simple but a computer monitor is not a piece of paper and can be any size and can be changed to any size by the user (within reason).

The first design you chose would be simple if we simply set a fixed height and width for everything but that would prove inflexible and would not allow for the screen to be resized etc.

Your second design looks easier but you are probably going to need to make it a fixed width for the content part. I suggest you base it on my other example here:

http://www.pmob.co.uk/temp/blackandwhite3.htm

Again this is not a simple layout because you are splitting the screen into 2 halves and then trying to match the content up exactly with the 2 halves.

You could use a wide background image repeated centrally on the body instead of the way that I have done it but there would be an issue with the background sliding off the side of the page as the screen is resized smaller thatn the central layout.

As I said above it would be easy to do that layout in a fixed width container that was half black and white and didn't need to match with the body

**floriauck** · Jun 22, 2006 09:09

ok. I used your example and was able to put the flower image in the middle.<edit> I was also finally able to get them to stick to the browser bottom in firefox. Not yet in IE6. I think it has to do with the fixed property that doesnt work in IE. My hack didnt work yet.</edit>

http://www.designingit.com/new/

Does it look right so far? My next steps would be to put the logo in the upper left corner and the flash button in the upper right corner. And then the two content boxes (works, contact). And these two I should make fixed? Is that what you were saying?

ps: it works fine in IE6 and firefox. IE7 is doing some weird stuff though.

**Paul O'B** · Jun 22, 2006 14:36

HI,

If you want it on the bottom then you could do this instead which works in ie.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 column layout - no float drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html { height: 100%;}
* html #wrap {height: 100%;}
/* end hide */
body {
overflow: hidden;
background: #000; 
color: #fff;
height:100%;
min-width:760px;
}
div.content
{
height: 100%;
overflow: auto;
}
#inner{position:relative;width:100%}
#wrap {
min-height: 100%;
margin-left:50%;
border-left:1px solid #000;
position:relative;
background:#fff;
color:#000;
z-index:1
}
#centre_col {
position:absolute;
bottom:1px;
left:-155px;
width:300px;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both
}
</style>
<!--[if IE]>
<style type="text/css">
body {width:expression( documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760" : "auto") : "760px") : "auto" );}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="left_col"> </div>
</div>
<div class="clearer"></div>
<div id="centre_col"> <img src="new/Sliced-images/flower.jpg" width="300" height="460" alt="Logo"/> </div>
</div>
</body>
</html>

And these two I should make fixed? Is that what you were saying.

No I was talking about fixed widths not fixed positionng. You need to either absolutely place the elements or float them. It depends on the dynamics you require which I can't really answer from looking at a picture.

If your pages are similar then you can float the logo button left and float the flash button right. then you could use margins to push the bottom content into place and then float things where necessary.

if you look at the very first example

http://www.pmob.co.uk/temp/blackandwhite6.htm

You can see that the elements are floated into place.

Of course you could do the same with absolute positioning but it all depends on what happens to the flow of the document.

User Tag List

Thread: how to style the body 50% black and 50% white

Thread Tools

Display

how to style the body 50% black and 50% white

Bookmarks

Bookmarks

Posting Permissions