gradient baggrund

Sat, 23 Jun 2012 07:18:10 GMT

Hej Alle

Jeg har en lille udfordring, som jeg simpelthen ikke kan hitte ud af

Jeg har en side, som best�r af en gradient baggrund. Denne g�r fra hvid til gr�. Under denne kommer en anden baggrund, som er hvid igen.

Indholdet i gradienten svinger i height. Men da jeg har brugt et baggrundsbillede, vil dette jo gentage sig. Jeg vil derfor gerne have at baggrunden blot forbliver gr� indtil bundindholdet kommer

Mit html ser s�dan ud

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <link href="underside2-css.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 <div id="wrapper">
 <div id="top-content">Til top indhold
 <div id="left-content">venstre indhold
 <div id="logo">Logo</div>
 </div>
 <div id="right-content">Højre indhold
 <div id="search">Søgning</div>
 <div id="flag">Flag</div>
 <div id="telefon">Telefon</div>
 <div id="menu">Menuen</div>
 </div>
 </div>
 <div id="topbillede">Topbillede</div>
 <div id="breadcrump">Brødkrumme</div>
 <div class="content">content
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 hhhhhhh
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br />
 v
 
 
 
 
 
 
 
 
 </div>
 <!--<div id="bundwrapper"></div>-->
 
 
 </div>
 <div id="testfooter">
 <div id="content">Footer content</div>
 </div>
 </body>
 </html>

og mit css

CSS kode

 @charset "utf-8";
 /* CSS Document */
 body {margin: 0; padding: 0; background-image: url(images/forrside-bg.jpg);
 background-repeat:repeat-x; }
 #wrapper {margin:0 auto; width: 960px; left: 320px; background-color:#CCC; }
 #top-content {width: 960px; height: 123px; background-color: #333; }
 #left-content {width: 247px; height: 123px; float: left; background-color:#00C; position: absolute;top:0; }
 #right-content {width: 712px; height: 123px; float: right; background-color:#569; /*position: absolute;*/ top:0; }
 #logo {/*position: absolute;*/ width: 182px; height:64px; top: 45px; background-color: #F00; z-index:200;}
 #search {/*position: absolute;*/ float:right; height: 15px; width: 25px; top: 11px; background-color:#0F3; left: 860px;}
 #flag {/*position: absolute;*/ float:right; height: 15px; width: 25px; top: 47px; background-color:#656854; left: 860px;}
 #telefon {/*position: absolute;*/ float:left; height: 30px; width: 25px; top: 45px; background-color:#kjkhgf; left: 251px;}
 #menu {/*position: absolute;*/ float:right; height: 49px; width: 709px; top: 89px; background-color: #F00; left: 251px; z-index:200;}
 #topbillede {/*position: absolute;*/ float:right; height: 135px; width: 960px; top: 123px; background-color: #000; left: 320px;}
 #breadcrump {/*position: absolute;*/ float:left; height: 25px; width: 960px; top: 258px; background-color: #fff; left: 320px;}
 .content {/*position: absolute;*/ float:left; height: auto; width: 960px; top: 281px; background-color: #CCC; left: 320px; -moz-border-radius-bottomright: 15px;
  border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px;
  border-bottom-left-radius: 15px; -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px; -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px; }
  #bundwrapper {/*position: absolute;*/ margin:0 auto; width: 100%; background:#000; top: inherit }
 
 
 
 /* Tilføjet af Martin */
 
   
 #testfooter {
     height:20px;
     width:100%;
     margin:0 auto;
     float:left;
     background-color:#333;
     /*position:absolute;*/
 }
 
 #testfooter #content {
     height:100%;
     width:960px;
     margin:0 auto;
 
     background-color:#FFF;
     /*position:absolute;*/
 }

Udvikleren.dk - Seneste [gradient] forum tr�de

gradient baggrund