zwei Hintergrund Grafiken übereinander?
#11
Hallo kickedINtheHEAD,

wie so vieles im Internet ist auch das hier nicht überlebensnotwendig. Aber es wäre ganz nett, wenn zum Einen ein grafischer Hintergrund (der sich immer wiederholt) vorhanden sein kann, und gleichzeitig ein Bild (sagen wir mal ein Logo) zentriert in der Mitte der Seite. Wenn dieses auch noch halbtransparent sein könnte, wäre das noch besser.

Hoffentlich habe ich das nun verständlich erklären können.

Der Grund, warum ich überhaupt danach frage, ist, dass ich mich sonst entscheiden müßte, ob ich in Zukunft den grafischen Hintergrund oder das Logo (Wasserzeichen) verwenden möchte. Wenn's beides gehen würde, wäre halt besser Wink
  Zitieren
#12
also mal der code für die zwei hintergrundbilder übereinander

[code=php]<html>
<head>
<style type="text/css">
<!--
body {
background-color: black;
background-image: url(bild-hinten.jpg);
background-repeat: repeat;
}

div.main {
height:100%;
background-color: transparent;
background-image: url(bild-vorne.jpg);
background-repeat: no-repeat;
background-position:center center;
background-attachment:fixed;
}
-->
</style>
</head>
<body>
<div class="main">
text
</div>
</body>
</html>[/code]

ich hoffe du hast mit wasserzeichen gemeint dass das zweite logo net scrollt Wink

habs nur grob getestet falls irgendwelche fehler auftauchen sofort melden

war gar net mal so einfach wie ich ma vorgestellt hab *fg*

lösung mit transparenz kommt noch - dürfte aber vorraussichtlich nur in ie, firefox und safari funktionieren

ps der gesamte inhalt kommt jetzt da rein wo text steht Wink
  Zitieren
#13
sorry für doppelpost aber wird sonst so extrem lang
hier ne lösung mit transparenz

[code=php]<html>
<head>
<style type="text/css">
<!--
body {
background-color: black;
background-image: url(bild-hinten.jpg);
background-repeat: repeat;
}

div.main {
height:100%;
background-color: transparent;
background-image: url(bild-vorne.jpg);
background-repeat: no-repeat;
background-position:center center;
background-attachment:fixed;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}

div.main * {
position: relative;
}

-->
</style>
</head>
<body>
<div class="main">
<div>
test
</div>
</div>
</body>
</html>[/code]

da wo jetzt div.main * steht kommen jetzt die css attribute rein die du normal in den body schreibst

und wie gesagt dort wo test steht inhalt rein Wink

mit welchen browsern die transparenz sagt musst ausprobiern - aber zumindest firefox, mozilla suite, netscape, ie und safari sollten funzen

ich denk mal das 50 % ein zu geringer wert sein wird - ich würd die sichtbarkeit denk ich etwas erhöhen
  Zitieren
#14
Ausgezeichnet!

Vielen Dank! Du hast dir ja richtig Arbeit gemacht. Und das für einen Newbie Wink

Zunächst habe ich beide Versionen in einem html file getestet. Das Ergebnis ist absolut überzeugend. Mal testen, wie es in meinem Forum wirkt.

Und wenn ich dann einst damit beginne, in meiner kleinen Homepage auch noch endlich CSS einzusetzen, dann werde ich wissen, wo ich Hilfe finde!

[Bild: 000039787oi.gif]
  Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste