Background Gets Cut Off – Set CSS Element to 100%

When setting background container’s (<div>) height to 100% in CSS, what I see is this:

The background doesn’t fill up to the whole screen although I have set my background div container to 100%. The page looks ok when the window is smaller:

In order to solve this problem, I will have to set the parent’s container to 100% and the background container to min-height instead of height. In my case, my background container (<div>) is under <body>. So, here my css:

body
{
    height: 100%;
}
#background
{
    min-height: 100%;
}

Fixed Background Image with CSS

CSS has attribute to set your background image fixed, meaning the background will be still, not moving even you scroll up and down.

body
{
    background: url("../images/BackgroundPattern.jpg");
    background-attachment: fixed;
}

By setting the background attachment to fixed, your background will be static and only your content will be moving when the page is scrolled.

Keep Footer at Bottom of the Page with CSS

If you design a web page which content is not fill up the whole height of user’s screen, you probably will face the same problem like I did. When a page is not fill up user’s screen, you will end up with your footer floating in the middle of their screen. There will always going to be page that doesn’t have much content.

To keep the footer at, well, bottom, this guy has a good CSS trick! His name is Matthew James Taylor. Some other CSS tricks from Matthew that I like are:

iPad CSS layout
Imagine the headache dealing with iPad horizontal / vertical orientation, and iPhone too! Well, you guess it, Matthew got it all.

Floating boxes with CSS
This is one of the ways to create a liquid layout, or more modern terminology: responsive web design. And the examples.