css alignment problems :(

[krofunk]

hello all, I am in the process of remaking my site however I have hit a bump with the css.

I want a gradient background that is aligned to the bottom of the page,

body {
	background-color: #003366;
	background-position: bottom;
	background-image: url(images/bg.png);
	background-repeat: repeat-x;
}

This is the css I have written to create the look I want but when there is little or no content on a page it doesn't display properly.

I have an example of the problem on my website at the moment, just in case I haven't described the problem properly. ->Clicky Clicky<- any help would be great

 

[misson]

The link was indeed necessary to illustrate the problem, which is that there isn't enough content for the body to be larger than the viewport. The background is bottom aligned to the body, hence the gap between the bottom of the body's background and the bottom of the viewport. Try setting the background color and image on the html element.

This particular forum is for design help (help with the look of your site). For help with coding (including implementing a design), you should use the Programming Help forum.

 

[Zubair]

***Moved to Programming Help***

 

[krofunk]

Thanks for moving the thread *admits reading fail* and thank you misson for your reply, I will give it a go asap.

unfortunately setting the background in the html element was unsucessful, however after searching through www.w3.org I found the following

If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding box. For example,

body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}

Setting the attachment as fixed appears to have worked for me, however I wouldn't have found this solution if it wasn't for you mentioning alignment to the viewport rather than body.