ugrás a tartalomhoz

CSS - háttér

simisoma · 2010. Dec. 15. (Sze), 01.22
Sziasztok,

milyen megoldást tudnátok javasolni nekem...

Van egy oldalam ami a háttérrel együtt 1600px széles,

a tartalom rész 1024px széles

a fejléc mögött a lap tetején kéne a háttér legyen, de
a lábléc mögött is kéne egy háttér.

A hátterek szélessége 1600px és a fejléccel - lábléccel összekapcsolódik, azonban azt szeretném, hogy az oldalt 1600px-nél kisebb felbontásban nézik vagy a böngésző szélességét kicsinyítik,mozgatják akkor is a tartalom rész legyen a böngésző közepén.

egybe nem tudom betenni a hátteret, mert a fejléc és lábléc közötti rész magassága oldalanként dinamikusan változik.

egy weblapon belül a BODY részre nem lehet két hátteret tenni egyiket TOP a másikat BOTTOM elrendezéssel, vagy valami hasonló megoldással?

Vagy mi más olyan lehetőség van ahol a tartalom részem (1024px széles)lesz a böngészők számára a fix, és a méretezésénél, előbb a háttereket (1600px széles)takarja ki....???

Húúú remélem érthetően írtam ezt le... :-)

Köszönöm előre is a segítséget...
‹ Bugos képbetöltés háttérkép lentebbről indítása ›
 ■
1

Ilyesmi

Poetro · 2010. Dec. 15. (Sze), 03.27
Ilyesmi:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html {
      height: 100%;
    }
    body {
      height: 100%;
      margin: 0;
      position: relative;
      background: red url(http://www.artppt.com/images/red-gradient.jpg) top center repeat-x;
    }
    #main {
      background: blue url(http://www.artppt.com/images/blue-gradient.jpg) bottom center repeat-x;
      position: relative;
    }
    .content {
      width: 1024px;
      margin: 0 auto;
    }
    header, footer {
      display: block;
    }
    footer {
      height: 100px;
    }
    h1 {
      margin: 0;
      padding: 1em 0;
    }
  </style>
</head>
<body>
  <div id="main">
    <header>
      <div class="content"><h1>Title</h1></div>
    </header>
    <div id="content">
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           Phasellus velit lorem, sodales vel dictum et, mattis in
           urna. Nam in metus vel lacus ornare tincidunt. 
           Curabitur molestie suscipit rhoncus. Pellentesque 
           tempus, sem in posuere suscipit, massa velit cursus 
           nisi, quis malesuada nibh lectus eget nunc. Nulla a 
           arcu nec mauris varius faucibus. Pellentesque euismod 
           pretium sapien ut hendrerit. Fusce in mi ac orci aliquam
           facilisis. Donec dictum egestas ipsum ultrices tempus. 
           Praesent aliquet tellus id ante tincidunt vel commodo 
           mauris auctor. Aenean eget erat leo, nec dapibus velit. 
           Quisque vitae lorem nisi.</p>
      </div>
    </div>
  </div>
  <footer>
    <div class="content"><ul>
      <li><a href="#">X</a></li>
      <li><a href="#">y</a></li>
      <li><a href="#">z</a></li>
    </ul></div>
  </footer>
</body>
</html>
2

Köszönöm!

simisoma · 2010. Dec. 15. (Sze), 07.49
Köszönöm, hogy ez nem jutott eszembe... :-) nagyon köszönöm!!!