Setting the background-color on the entire page

Need to set the background-color or background-image on the entire page or at least the viewport if the page doesn't reach very far
Date Created: 18th November 2006
Date Modified: 18th November 2006
Home > CSS > Page Background

Problem in WebmasterWorld HTML Forum:
http://www.webmasterworld.com/html/3160820.htm

A very short page, we want the background-color to stretch to the whole page. Style the BODY tag? Seems OK to me, regardless of whether the BODY height is set to 100% or the contents are in an absolutely positioned DIV - but not according to findings in the forum?!

A longer page...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Vivamus odio. Maecenas sed magna. Praesent diam mauris, facilisis eget, pellentesque vitae, blandit elementum, lectus. Ut id leo. Nullam eget massa vitae erat dapibus dignissim. Cras tempor. Etiam feugiat malesuada tortor. Vestibulum luctus. Mauris aliquam. Vivamus facilisis nulla ac massa lacinia consequat. Donec scelerisque. Cras egestas mi at purus.

Pellentesque feugiat mauris in sapien. Quisque malesuada sem quis sapien. Cras rhoncus pede quis metus scelerisque auctor. Aliquam convallis consequat lacus. Vivamus eros ante, accumsan ac, lobortis quis, laoreet non, felis. Curabitur eu ligula et quam gravida sollicitudin. Ut rutrum. Proin tincidunt, libero dapibus porttitor mollis, risus tellus tempus enim, eget scelerisque enim turpis sed tellus. Phasellus ut magna. Nullam non tortor. Phasellus varius augue eu urna. Aliquam lobortis arcu vitae diam. Duis metus. Phasellus cursus elit lacinia urna rhoncus tincidunt.

Curabitur molestie dignissim purus. Donec aliquam, risus sed porta cursus, nisi eros tristique diam, vitae condimentum sapien nisl vel diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc turpis mi, sollicitudin id, vehicula eget, fermentum sed, tellus. Nulla nisl. Quisque tempus. Nunc consequat, purus condimentum pharetra tristique, pede mi tincidunt justo, eu congue odio neque et lacus. Aenean molestie, ipsum a laoreet pretium, enim sapien cursus mi, vitae ornare neque metus quis leo. Vestibulum consectetuer, massa ac vestibulum tempor, mi ipsum rutrum purus, et elementum purus sem eu neque. Vestibulum justo enim, posuere sed, congue in, lacinia in, justo. Proin sollicitudin quam in lacus. Proin dignissim nisi in tortor. Mauris nibh nisi, vehicula in, accumsan eget, vestibulum in, libero.

Pellentesque felis. Nulla mi metus, mollis et, rutrum id, vestibulum iaculis, nisl. Quisque fermentum malesuada neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam accumsan lorem cursus est. Nunc ornare elit sollicitudin neque. Duis in tortor sit amet tellus malesuada iaculis. Etiam magna enim, bibendum ac, vestibulum nec, tincidunt id, metus. Cras ornare, enim eu accumsan accumsan, lectus sapien tincidunt dui, non sollicitudin orci purus commodo nibh. Fusce ut magna sed lectus convallis adipiscing. Integer scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus magna augue, tincidunt eget, congue id, auctor a, augue. Donec rutrum, arcu eu malesuada posuere, augue dolor pharetra pede, at condimentum tortor lectus a arcu. Maecenas eros. Fusce elementum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc interdum, tortor nec sagittis dignissim, nibh elit congue libero, ut molestie nisl libero id sapien. Fusce convallis odio ac nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed at turpis feugiat urna mattis cursus. Vestibulum a mi. Proin sit amet leo id magna volutpat accumsan. Donec non nibh ac dui convallis placerat. Nam convallis bibendum urna. Fusce eros sapien, ornare sed, porttitor id, blandit sit amet, quam. Nunc dignissim pulvinar nisl. Donec commodo. Nullam eu leo. Fusce quam mauris, malesuada non, hendrerit sed, viverra a, arcu. Donec imperdiet lorem vitae sapien. Aenean auctor.

Praesent sit amet nunc eu magna commodo tincidunt. Nunc ultricies consequat lacus. Curabitur iaculis. Pellentesque lobortis fringilla tellus. Donec lacus. Cras mollis. Aenean sem. Ut sed nunc in augue condimentum vestibulum. Morbi a diam. Proin lectus. Sed diam massa, porta at, gravida vel, consequat vel, ante. Etiam interdum, elit vitae ullamcorper sollicitudin, risus sem eleifend ipsum, sit amet eleifend purus orci a magna. Phasellus adipiscing eros et erat. Maecenas eget mi.

Vivamus sit amet justo facilisis dolor lobortis tempus. Quisque lorem enim, tincidunt hendrerit, placerat aliquet, pharetra non, nibh. Donec nunc leo, tempus auctor, aliquet quis, eleifend vitae, augue. In a justo. Suspendisse tincidunt mattis elit. Mauris sed risus vitae ligula hendrerit suscipit. Proin ut justo. Mauris gravida egestas magna. Curabitur auctor, nibh at faucibus laoreet, elit dui varius risus, vitae aliquam tortor augue et nunc. Integer ut dolor. Morbi magna. Aliquam sed pede nec est cursus vulputate. Etiam eget eros.

Nunc posuere ligula. Integer id ligula. Etiam eu massa et nisi vehicula feugiat. Donec non diam. Curabitur viverra sollicitudin turpis. Phasellus rhoncus libero quis turpis. Phasellus neque. Sed varius, ipsum at sagittis iaculis, lacus nulla laoreet sapien, congue varius neque massa quis turpis. Pellentesque mattis magna pretium dolor. Nulla ipsum velit, cursus eu, suscipit sit amet, pellentesque eget, eros. Cras vitae arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam turpis.

Nulla odio. Proin eget pede. Sed vulputate dictum nibh. Maecenas quis orci. Etiam eu velit. Aliquam fermentum egestas risus. Donec justo. Nullam non neque ut lorem fringilla scelerisque. Aenean scelerisque. Nullam venenatis congue nulla. Quisque semper. Maecenas dapibus venenatis nisl. In ac libero ut nibh tincidunt ullamcorper. Maecenas viverra leo vulputate odio. Aliquam ut dui nec nulla ullamcorper congue.

Cras nec odio. Fusce egestas. Praesent eu orci et ligula facilisis posuere. Cras a diam eu mauris imperdiet pretium. Aliquam ullamcorper molestie est. Fusce vel nisl. Sed pulvinar eros id eros. Nullam elementum sem sit amet ante fringilla volutpat. Nam sed mi sed massa volutpat eleifend. Nulla malesuada, mi adipiscing imperdiet aliquam, augue pede semper enim, ac vulputate risus massa quis leo. Morbi posuere ante. Vivamus ac nulla. Aenean elementum. Curabitur luctus tristique nunc. Nulla scelerisque hendrerit felis. Nunc est sem, viverra sit amet, volutpat quis, interdum nec, dolor. Fusce pellentesque orci sed ante. In hac habitasse platea dictumst. Aenean eleifend est a diam.