Grafik i sidehovedet: Baggrundsbillede

Principeksempel 6b

Retur til foregående

Stylesheet:

div#banner {
  margin:10px 20px 10px 20px;
  background-color:#eef;
  height:148px;
  border:1px solid black;
  position:relative;
  background-image:url(iss.jpg);
  background-repeat:no-repeat;
  background-position:left top;  }
div#banner h1 {
  position:absolute;
  bottom:20px;
  left:20px; 
  color:white;
  font-size:250%}

Bemærkninger:

Her er billedet i sidehovedet indsat som et egentligt baggrundsbillede ved hjælp af CSS formregler, de med rødt markerede i stylesheet'et herover. Du kan læse mere om dette i artiklen Noter om baggrundsgrafik.

Bemærk i dette eksempel at billedet beskæres, i modsætning til eksempel 6a, hvor billedets bredde øges/mindskes med browservinduets bredde. Ved denne metode er det derfor bedst at have en absolut maksimum bredde på websidens indhold.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit.