pagebg Bild Wiederholung

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Lonley
Mitglied
Beiträge: 115
Registriert: 13.03.2015 16:51

pagebg Bild Wiederholung

Beitrag von Lonley »

Hallo!

Habe mir diesen Style hier geladen: WoW5thAniversary

Nun habe ich ihn etwas umgebaut. Das obere Bild mit den WoW Herren habe ich durch einen eigens Bild ersetzt und möchte nun das dies so lange wiederholt wird, bis das Forum endet.

Habe hier mal die: Stylesheet.css

Das wäre der Eintrag, um den es geht:

Code: Alles auswählen

#pagebg {
  z-index:-15;
  LEFT: 0px;
  POSITION:absolute;
#  TOP:250px;
  width:100%;
  height:2200px;
  background: url("{T_THEME_PATH}/images/page-bg.jpg") center no-repeat;
} 
Das Bild page-bg.jpg soll sich, wenn das Forum länger als das Bild ist wiederholen. Das no-repeat weg nehmen bringt da nichts, auch y-repeat brachte keinen Erfolg.

Hoffe ihr könnt mir da weiterhelfen. :)
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7888
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: pagebg Bild Wiederholung

Beitrag von Kirk »

Hallo
Probier es mal so:

Code: Alles auswählen

background: url({T_THEME_PATH}/images/page-bg.jpg) center repeat-y;
Lonley
Mitglied
Beiträge: 115
Registriert: 13.03.2015 16:51

Re: pagebg Bild Wiederholung

Beitrag von Lonley »

Erst mal danke für die Antwort. Aber leider zeigt er es wie immer nur ein mal an, dass wars.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: pagebg Bild Wiederholung

Beitrag von Melmac »

Hi :)

Im originalen Style werden für die Darstellung des Hintergrundes zwei Bilder verwendet:
- einmal "die Herren" oben => "page-bg.jpg" - das umfasst aber nur alles "ab Brust aufwärts
- einmal ein Bild mit dem Teil ab Brust abwärts => "header-bg.jpg"

Dein angegebener Code betrifft Letzteres ;)

Wenn Du also die Grafik "der Herren" durch ein eigenes Bild ersetzen willst, dann müsstest Du folgende Codezeile in der stylesheet.css anpassen:

Code: Alles auswählen

#container { width: 100%; background: url("{T_THEME_PATH}/images/header-bg.jpg") top center no-repeat}
Für einen ersten Versuch:
Speichere Dein Bild als "header-bg.jpg" im urspünglichen Verzeichnis und ändere die genannte Zeile ab in

Code: Alles auswählen

#container { width: 100%; background: url("{T_THEME_PATH}/images/header-bg.jpg") top center repeat-y}
Könntest Du vielleicht noch einen Link zu Deinem Board einstellen?
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Lonley
Mitglied
Beiträge: 115
Registriert: 13.03.2015 16:51

Re: pagebg Bild Wiederholung

Beitrag von Lonley »

Ah super, wir kommen der Sache schon näher, jetzt setzt er mir zwei mal das Bild nach einander an, so war es gedacht.

Nun gibt es nur noch eine Kleinigkeit. Er Schneidet das Bild irgendwann unten plätzlich ab, genau da wo das Forum zu ende ist. Kann man es so einstelle, dass er immer das Bild komplett amzeigt, ohne etwas selbst zurecht zu schneiden?

Alternativ:

Habe gerade den Befehl:

background-attachment:fixed;

probiert. Würde so auch funktionieren, dass der Hintergrund halt bleibt wo er ist. Problem hier, nach einer weile scrollen bleibt das Bild nicht mehr fixiert sondern scrollt nach oben und der Hintergrund wird schwarz.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: pagebg Bild Wiederholung

Beitrag von Melmac »

Lonley hat geschrieben:Er Schneidet das Bild irgendwann unten plätzlich ab, genau da wo das Forum zu ende ist.
Du meinst die "schwarze Lücke", die das Bild zu haben scheint, wenn Du bis ganz nach unten scrollst?
Falls ja: es wird nicht "abgeschnitten", sondern an dieser Stelle von der Grafik überdeckt, die den unteren Abschluss des "Boards" bildet ;)

Schau Dir mal im "/theme/images/" Verzeichnis die Grafik "page-footer.jpg" an: deren untere Hälfte verschmilzt optisch mit der ursprünglichen Hintergrundfarbe, wird jetzt aber sichtbar.

Du müsstest diese Grafik also entsprechend nachbearbeiten.

Nochmals die Bitte:
Melmac hat geschrieben: Könntest Du vielleicht noch einen Link zu Deinem Board einstellen?
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Lonley
Mitglied
Beiträge: 115
Registriert: 13.03.2015 16:51

Re: pagebg Bild Wiederholung

Beitrag von Lonley »

Geht um diesen Bereich hier unten: Bildlink

Dieser Bereich wird schwarz angezeigt durch die Backgroundfarbe:

Code: Alles auswählen

body {
/*    background: #000002;*/
    color: #573325;
    font-size: 10pt;
    font-family: Verdana, Arial;
    margin-bottom: 10px;
    font-size: 10px;
    } 
Habe ich nun einmal ausgeklammert, nun ist es weiß. Die page-footer Datei ist schmaler als die üblichen Dateien, nur 940x205 und ist nur das Stück was da unten ins Weiß rein schaut, mehr gehört nicht zur Datei. Habe nun versucht diese Datei breiter zu machen mit einem Verlauf, dass der Abschluss besser wird, jedoch alles was größer als 940x205 ist schneidet er ab, dass Platz für das weiß ist. :-?

Link kann ich leider nicht liefern da ich alles mit XAMPP aufgebaut habe. Könnte dir den Style schicken per PN, jedoch sind einige Mods drin, denke die werden zicken, wenn du den Style installierst.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4920
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: pagebg Bild Wiederholung

Beitrag von Talk19zehn »

Hi, wenn ihr die Grafiken in der id="pagebg" und id="container" nicht nutzt und jene dem "body" zuweist, könnte ich mir vorstellen, dass das Vorhaben funktioniert. Die Grafik im Footer muss allerdings "gekürzt" und/oder angepasst werden. So finde ich in jenen CSS-Bereichen neben "Wrapper" verschiedene Höhen.

Meines Erachtens sind nunmehr eventuell rd. 80px / 88px relevant, die für die Verschiebung laut der beigestellen Grafik
Lonley hat geschrieben:Geht um diesen Bereich hier unten: Bildlink
verantwortlich zeichnen. Das lässt sich leider nicht genau anhand der Grafik ableiten.


::
BTW: Subsilver2 in der Version 3.0.8 ist älter denn je. Geht es denn thematisch wirklich um WoW? Oder nur um das Design an sich?

Grüße
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: pagebg Bild Wiederholung

Beitrag von Melmac »

@Talk19zehn

Da warst Du jetzt schneller - an einen ähnlichen Ansatz hatte ich ebenfalls gedacht ;)
Dazu sollte dann, imho, auch gleich die overall_header.html etwas umgebaut werden.


@Lonley
Talk19zehn hat geschrieben:BTW: Subsilver2 in der Version 3.0.8 ist älter denn je.
Eben - falls Du dabei sein solltest, ein eigenes Board vorzubereiten, solltest Du zumindest den Style auf den Stand der von Dir verwendeten phpBB Version (3.0.14 ?) bringen, um möglichen Problemen vorzubeugen, die veraltete Styleversionen mit sich bringen können.


Auf die Schnelle ein möglicher Ansatz für Deine Hintergrundthematik (bitte vorher Files sichern):

1) Anpassen der Grafik page-bg.jpg:
Schneide die schwarzen Bereiche links und rechts der eigentlichen Grafik weg (ein paar wenige Pixel für den Übergang kannst Du stehenlassen), so dass nur die Phantasielandschaft selbst stehen bleibt, und speichere es unter gleichem Namen im Verzeichnis ab.
Diese schwarzen Randbereiche brauchst Du nicht mehr.


2) HTML anpassen:

- in overall_header.html
suche

Code: Alles auswählen

<body class="{S_CONTENT_DIRECTION}">
<div id="headerlogo"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></div>
<div id="pagebg"> </div>

<a name="top"></a>

<div id="container">
<div id="wrapper">

<div id="header"> </div>
<div id="Separador1"  style="height:80px;"> </div>

<div id="contentbg">
ersetze durch

Code: Alles auswählen

<body class="{S_CONTENT_DIRECTION}">

<div id="wrapper">

<div id="headerlogo"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></div>

<div id="header"> </div>

<div id="contentbg">
Da jetzt ein öffnendes <div> gegenüber vorher fehlt:
in overall_footer.html
suche

Code: Alles auswählen

</div>



</body>
</html>
und lösche das </div>


3) CSS anpassen:
in stylesheet.css

suche

Code: Alles auswählen

body {
/*	background: #000002;*/
	color: #573325;
	font-size: 10pt;
	font-family: Verdana, Arial;
	margin-bottom: 10px;
	font-size: 10px;
	}
ersetze durch

Code: Alles auswählen

body {
	color: #573325;
	font-size: 10pt;
	font-family: Verdana, Arial;
	margin-bottom: 10px;
	font-size: 10px;
	background-image: url("{T_THEME_PATH}/images/page-bg.jpg");
	background-position: center top;
	background-repeat: repeat-y;
	background-color: #000000;
	background-size: auto;
}
suche

Code: Alles auswählen

#headerlogo {
  z-index:300;
  LEFT: 50%;
  Margin-left: -295px;
  POSITION:absolute;
  TOP:30px;
  width:700px;
  height:145px;
}
ersetze durch

Code: Alles auswählen

#headerlogo {
  z-index:300;
  position: relative;
  width:100%;
  height:145px;
  text-align: center;
}
suche

Code: Alles auswählen

#wrapper {
	width: 940px; 
	margin: 0 auto; 
	/*background: url("{T_THEME_PATH}/images/parchment-bg.jpg") top center repeat-y;*/ 
	position: relative; 
	top: 88px;
	}
ersetze durch

Code: Alles auswählen

#wrapper {
	width: 940px; 
	margin: 0 auto; 
	position: relative; 
	top: 40px;
}
Ist, wie geschrieben, erst einmal nur ein grober Ansatz, an dem eventuell noch etwas gefeilt werden müsste.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“