Grafisk baggrund på tekstelementer

Html-koden for indsætning af billedet:

 <div id="banner">
 <h1>Webdesign 101 demoside>/h1>
 <img id="surf" src="surf_2.jpg" alt="" /></div>
  

Det er afgørende, at du ikke sætter noget linieskift ind mellem afslutningen af img-markøren og begyndelsen af den afsluttende </div>. Gør du det, vil der komme en smal padding under billedet.

Rødt italiensk marmor

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. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris.

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.

div#banner {
  border-bottom:
    1px solid gray;}
div#banner h1 {
  position:
    absolute;
  right:
    20px;
  top:
    20px;
  color:
    white;
  font-family:
    "arial black",sans-serif;
  font-size:
    200%;
  font-weight:
    normal;
}
img#surf {
  width:
    100%;
  border:
    none;
  height:
    150px;}