Frage stellen
dieses Problem ist bestimmt schon oft aufgetreten, habe aber noch keine vernünftige Lösung gefunden. Aber ich beschreibe es kurz und habe auch noch Codeschnipsel.
Es geht um eine 100% hohe Seite wo in einem container, der oben und unten am Browser anstößt ein Hintergrundbild existiert (oben links) und eine Hintergrundfarbe. Darüber liegt Text. Ausserhalb des Containers ist andere Farbe. Wenn der Text nun über den Browserrand hinausgeht (größer als Viewport ist) und man scrollt nach unten wird die Farbe im Container nicht fortgeführt. Jetzt werden einige schreien, dass lässt sich mit dem Faux-column gedöns lösen. Nein, tut es nicht, da ich ja bereits ein Hintergrund bild verwende und nur eins verwenden kann/darf. Gibt es hier ne andere Lösung ? Will ungern ein Hintergrundbild von 2000px höhe erstellen, damit auch jemand mit nem 27 Zoll Monitor den Hintergrund durchgehend sieht....
hier der Code:
css
- Code: Alles auswählen
*{
margin:0 ;
padding:0;
}
html,
body{
background-color:white;
color:#000000;
font-family: Helvetica,Arial,sans-serif;
font-size:12px;
height:100%;
min-height:100%;
}
#container
{
margin:auto;
float:none;
text-align:center;
width: 950px;
min-height:100%;
background:top left;
background-image:url(../images/background.jpg);
background-repeat:no-repeat;
background-color: #f1f4d9;
}
#main{
float:right;
width:500px;
text-align:left;
margin:0;
}
html
- Code: Alles auswählen
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="css/main1.css" />
</head>
<body>
<div id="container" >
<div id=main>
<p>Lorem ipsum dolor sit amet consectetuer cursus nec augue <br><br>volutpat Lorem. Volutpat egestas ac vitae justo nisl interdum enim semper cursus nibh. Urna ac sed Aenean pellentesque et condimentum euismod congue enim id. Accumsan ac Donec eleifend ante Aenean Cum pede Lorem pretium Pellentesque. Interdum Proin id enim amet turpis aliquam elit Aliquam lacus dui. Libero felis risus feugiat Mauris nibh eros turpis eget pede Nulla. </p>
<p>Vitae massa congue mus Quisque Maecenas vel sem vitae tincidunt Nam. Leo adipiscing id elit Sed id Cras convallis lacus In congue. Curabitur lobortis wisi Ut sem et Morbi nascetur nulla amet ornare. Nibh eget ante pretium cursus tempus Sed Nam at pretium wisi. Aliquam nibh et turpis habitant feugiat orci elit felis laoreet sed. Phasellus Morbi et sagittis sit ut tempus velit velit Morbi quam. Nulla.</p>
<p>Cursus Mauris tincidunt <br><br>eget consectetuer nibh condimentum Vivamus laoreet wisi Integer. Dis mollis Phasellus commodo a ante ut pede Sed nibh Curabitur. Ante accumsan sit justo condimentum Nam sit fames orci et Vestibulum. Scelerisque interdum vitae risus eget Aenean Curabitur sed leo tristique et. Pellentesque lacinia Aenean et dis ligula feugiat lorem tincidunt tristique Maecenas. Suspendisse dui quis ut orci est wisi.</p>
<p>Risus aliquam vitae et at ligula tristique velit <br><br>Pellentesque Nam justo. Nunc egestas Vestibulum ut Duis egestas Pellentesque dolor felis ut laoreet. Justo Vestibulum et vitae dui scelerisque laoreet et consequat amet sodales. Semper orci Integer et Pellentesque id Donec wisi pharetra augue id. Metus lacinia pharetra Sed sem eros porttitor mus facilisi amet urna. Cursus tincidunt congue velit eget.</p>
</div>
</body>
</html>
