CODEWITHSUNDEEP
csshtmlbackground
Beast_Code
Beast_Code

Reputation: 3247

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

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

Upvotes: 0

Views: 453

Answers (3)

albusshin
albusshin

Reputation: 4010

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

Upvotes: 2

Nicky Smits
Nicky Smits

Reputation: 3138

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

Upvotes: 1

Kheema Pandey
Kheema Pandey

Reputation: 10265

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.

Upvotes: 2

Related Questions