background resiz

[Minusbrain]

Wünsche einen guten Morgen Allerseits!

Der Betreff sagt es bereits. Ich suche einen einfachen background resiz für phpbb. Hatte mich schon quer durchs Forum bzw. durchs Net gefressen und ausprobiert, aber geklappt hatten die Versuche nicht wirklich. Würde mich über eure Hilfe wirklich freuen

Liebe Grüße
Minus

[Minusbrain]

So, nach langem rumexperimentieren habe ich endlich eine Lösung gefunden und stelle sie der Community zur Verfügung um sie ggf. zu verbessern!
Es handelt sich hierbei um eine reine CSS Geschichte, JS wird nicht benötigt.

Zwei Dinge müssen im overall_header.html eingebunden werden:

Code: Alles auswählen

<style type="text/css">
<!--
html{
  margin:0;
  padding:0 0 0 0;
  height:100%;
}
 
body {
  padding:0;
  margin:0;
  height:100%;
}
 
#bg_img {
  background:#ffffff;
  margin:0 0 0 0;
  padding:0;
  height:100%;
  display:block;
  overflow:auto;
}
 
#bg_img p {
  margin:0;
  padding:2%;
}
 
#bg_img img {
  float:right;
  height:100%;
  width:100%;
  border:0px solid;
  margin:0 0 0 0;
  position:fixed;
}
-->
</style>

so wie

Code: Alles auswählen

<div id="bg_img" style="z-index:0;"><img src="bg_img.jpg" width="200" height="200" border="0" alt="" /></div>
<div style="position:absolute; top:0; left:0; z-index:1;">Inhalt</div>

Hierzu rate ich, eine neue Datei anzulegen die völlig leer ist, und die ebenfalls overall_header.html heißt.

Und so gehts:

1. Kopiert zuerst den kompletten div in die leere Datei, sprich also

<div id="bg_img" style="z-index:0;"><img src="bg_img.jpg" width="200" height="200" border="0" alt="" /></div>
<div style="position:absolute; top:0; left:0; z-index:1;">"Inhalt"</div>

2. Dann ersetzt "Inhalt" mit dem kompletten Quelltext des original overall_header.html


3. Kopiert euch nun in den eingefügten Quelltext zwischen <header></header> den CSS

<!--
html{
margin:0;
padding:0 0 0 0;
height:100%;
}

body {
padding:0;
margin:0;
height:100%;
}

#bg_img {
background:#ffffff;
margin:0 0 0 0;
padding:0;
height:100%;
display:block;
overflow:auto;
}

#bg_img p {
margin:0;
padding:2%;
}

#bg_img img {
float:right;
height:100%;
width:100%;
border:0px solid;
margin:0 0 0 0;
position:fixed;
}
-->
</style>


Das wars.

Passt nun noch den Pfad zum bg_img.jpg an bzw. ersetzt dieses mit einem Bild euer Wahl.


Dieser Script hat nur einen Nachteil den ich nicht beheben konnte. Nämlich der, dass das Bild seine Proportionen nicht beibehält. Wer damit leben kann sollte nun ne Lösung haben, bessere oder einfachere sind gern gesehen

LG
MinusB