Proof of concept

I Usenet nyhedsgrupperne om webdesign og HTML/CSS er der af og til nogen der spø'r om man ikke kan lave et baggrundsbillede, der fylder hele browservinduet.

Det korte svar er, at det kan man ikke.

Men som denne side illustrerer er det forholdsvis nemt at få et billede, der er indsat i HTML-koden, til at fylde hele baggrunden.

Originalbilledet er 3488*2616 pixel og fylder 800 kilobytes ved 15 procent kompression. Det anvendte billede er 2000*1500 pixel og fylder godt 200 kilobyte ved samme kompressionsgrad.

Mumletekst

Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet, iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a, tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam scelerisque consectetuer magna. Nam interdum risus non tortor. Donec eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod. Praesent nec purus. Mauris eget magna.

Nullam vehicula, augue id imperdiet iaculis, tellus neque commodo felis, ac aliquet risus nibh id nibh. Curabitur id odio non diam pretium luctus. Curabitur volutpat libero vel dolor. Ut imperdiet quam vel massa. Maecenas aliquam, diam nec dignissim accumsan, mauris mi venenatis turpis, consequat vestibulum enim lorem quis nibh. Integer bibendum pretium purus. Quisque ante. Nulla sed arcu. Etiam vel arcu. Nunc varius. Maecenas elementum lacus sit amet arcu. Curabitur sagittis gravida ipsum. Donec ac turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam commodo diam. Duis viverra fermentum purus. Maecenas congue, sem non luctus ultrices, diam wisi porta diam, in varius dolor nulla id ante. Aliquam convallis volutpat nibh.

Den operative CSS-kode til denne side:

* {margin:0;padding:0;}
html,body {
  font-family:georgia,arial,sans-serif;
  background-color:#000;}
#side {
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  color:white;padding:0;border:none;}
#side img {width:100%;height:100%;}
.content {
  position:absolute; top:200px;
  color:white; margin:20px 3%;
  z-index:2;}

CSS-koden i øvrigt er indlejret i head-delen af siden.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Webdesign 101 sandkassen
Jørgen Farum Jensen, juni 2009