How to I create two containers with different backgrounds?

Question

Possible Duplicate:
Convert HTML + CSS to PDF with PHP?

I can't seem to find a way to accomplish this properly. I have two containers. In one container I want to use a background image that will take over the entire top half horizontally and then I want to use a second container and color it red. This will take over the bottom half horizontally.

I tried this:

HTML:

 <div class="container1">
     Some text and other divs go here. This is where the background will be an image.  
 </div>
 <div class="container2">
     Some text will also here along with divs. This is where I want to use the red background.
 </div>

CSS:

 .container1 {
      background-image: url('img.png');
      width:100%;
  }
  .container2 {
      width: 100%;
      color: #990000;
  }

The problem is that for the image container I am left with whitespace on the top, bottom, left, and right.

How do I solve this?

I think that background image is repeated by default! so How could you get whitespace there? — SaidbakR, Nov 22 '12 at 00:42
For one you're not defining a height on either. So the concept of "half" is unknown. Secondly, use firebug or developer tools to check the parents of these containers. I bet there's padding interfering — Kai Qing, Nov 22 '12 at 00:43
Is the whitespace inside `.container1` or outside? What is `img.png`? Are you sure the white is not part of the image? — Sparky, Nov 22 '12 at 00:43
Do you want the image to repeat or do you want it to size itself to the width of the div? — ultranaut, Nov 22 '12 at 00:45

score 2 · Accepted Answer · answered Nov 22 '12 at 00:45

2

You need to set padding and margins to 0. Most experienced UI developers will use what is known as a CSS reset, to eliminate any browser-specific default stylesheet behaviors (like giving padding.

For your purpose a basic CSS reset of:

body { padding: 0px; margin: 0px;}
div { padding: 0px; margin: 0px; }

at the beginning of your CSS file, should help.

Also, CSS color is related to teh text color, not the background color. You need to use background-color.

answered Nov 22 '12 at 00:45

Mike Brant

70,514
10
99
103

Thanks @mike. That worked. I do have a follow up question. Doing this made the image only take over half the page. But let's say I wanted to extend it's vertical coverage by 20px, how would I do it? I used
tags to extend it. Is there another way? – KPO Nov 22 '12 at 00:56
1

@KPO you could set the height explicitly with `height` CSS property. – Mike Brant Nov 22 '12 at 01:01
Thanks that worked too. Is there any place you would recommend me to learn excellent CSS from? I am a beginner. Whatever I know which is on an amateur level, i learned just to do things so not really an expert. – KPO Nov 22 '12 at 01:03

Paul S. · Answer 2 · 2012-11-22T00:57:08.147

Because you've not defined half properly, I'll say your code is okay with the exception of color should be background-color; see it working fine here http://jsfiddle.net/TkBxH/

If you mean half in terms of screen then you need to use absolute positioning, the CSS would be

.container1, .container2 {
    position: absolute;
    left:0;
    right:0;
    height:400px; /* based on screen size */
}
.container1 {
    top: 0;
}
.container2 {
    bottom: 0;
}

Edit: If you don't mind the absolute positioning on <body> (parent of .container1, .container2) you can avoid having to use a px value

body { /* Force <body> to fill screen */
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
.container1, .container2 {
    height:50%;
}

How to I create two containers with different backgrounds?

2 Answers2