CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Drewdavid
Drewdavid

Reputation: 3192

How to make the background colour the full height of the page?

I'm trying to make the main content area have a background image/colour that fills the whole area, but so far have been unsucessful.

Please see http://drewclifton.com/dev/dashboard/

So far I have tried adding a fill class to the container-fluid classed div – and also tried the page-content-wrapper div...

.fill {
    height:100%;
    background:darkblue;
}

... But the background does not extend past the vertical height of the enclosed #story-bar div

Upvotes: 0

Views: 45

Answers (4)

showdev
showdev

Reputation: 29168

Since you are using a percentage height, the height of .fill is relative to its parent. You will need to define a height for each ancestor up to and including the html and body elements:

html,body,
div#wrapper,
div#page-content-wrapper {
    height:100%;
}

Also, you are missing a semi-colon after the height definition for .fill:

.fill {
    height:100%;
    background:darkblue;
}

Here's a WORKING EXAMPLE.

(It's off-site since I had trouble fitting this into a runnable snippet.)

Upvotes: 2

SimplySimon
SimplySimon

Reputation: 21

If what you wish is for the entire page to have a darkblue background, simply apply the "background:darkblue;" property and value to your "body selector"

ie:

body { background-color:darkblue; }

Upvotes: 0

JOB
JOB

Reputation: 85

You will basically go away with height:100% in your code, and try this

background-image: url("image.gif");
background-repeat: repeat-y;

Upvotes: 0

LROBERTS
LROBERTS

Reputation: 11

set the height to 100% in the class col-lg-12

Upvotes: 0

Related Questions