What's the most effective way to use multiple background colors for the entire page?

Question

I am attempting to create multi color backgrounds.

I want the entire background to be blue with red sections in certain containers. I want the red to go all the way from side to side of the page without any white spaces that may be rendered by the browser. Here is what I have:

HTML:

<div class="Blue">
   Here is one color
</div>

<div class="Red">
    Here is one color
</div>

<div class="Blue">
    Here is one color
</div>

<div class="Red">
    Here is one color
</div>

CSS:

.Blue {
    width:100%; /* I want the width of the background to be 100% of the page ?*/
    height: 30%; /* I want the height of the background container to be 30% of the page? */
    background-color: blue;
}
.Red {
    width:100%;
    height: 30%; /*The next 30% of the page ? */
    background-color: red;
}

http://jsfiddle.net/4DXDX/ The edges are offset with a white margin on the sides.

How do I get the color to go all the way from edge to edge? Is putting the appropriate colors in a div tag the right/ or efficient way to do this?

Below is an image of the background i want to create.

enter image description here

google for css reset (or normalize) ... or take a look at this question http://stackoverflow.com/questions/99643/css-reset-default-styles-for-common-elements — rafaelcastrocouto, Mar 06 '14 at 16:47

score 2 · Accepted Answer · edited May 23 '17 at 12:10

2

Add this to your CSS rule:

* {
   margin: 0px;
   padding: 0px;
}

This will get rid of the margin. http://jsfiddle.net/TZRhn/

Also, check this question for more details.

In the comment @Kheema mentioned that universal selector may be a bad idea. You can use reset.css instead.

Check more of discussions of reset.css here

edited May 23 '17 at 12:10

Community

1
1

answered Mar 06 '14 at 16:42

albusshin

3,930
3
29
57

I am not really fan of using `Universal Selector` ideally you should use `reset.css`. – Kheema Pandey Mar 06 '14 at 16:57

Kheema Pandey · Answer 2 · 2014-03-06T16:52:11.067

2

You have to remove the margin and padding from the page. And the easiest way is to remove padding and margin by using this style.

html, body{margin:0; padding:0}

Note: It would be a good practice to use the reset.css file to avoid this kind of weird problem.

edited Mar 06 '14 at 16:52

answered Mar 06 '14 at 16:45

Kheema Pandey

9,977
4
25
26

score 1 · Answer 3 · answered Mar 06 '14 at 16:54

1

Indeed

* {
margin: 0px;
padding: 0px;
}

You have to add padding to the divs now if you dont want the contents of the div touching the edges

answered Mar 06 '14 at 16:54

Nicky Smits

2,980
4
20
27

What's the most effective way to use multiple background colors for the entire page?

3 Answers3