Hintergrundgrafik in verschiedenen Auflösungen.

Secretly · Beitrag von **Secretly** » 04.12.2011 18:34

Huhu,

ich bzw. wir möchten in unserem Forum gern eine Hintergrundgrafik einbauen. Nun ist jedoch die Frage wie groß sollte diese sein, dass sie bei verschiedenen Auflösungen nicht vollkommen schrecklich aussieht. Es wird ein "Motivhintergrund" sein, so dass links und rechts neben dem eigentlich Forum verschiedene "Bilder" zu sehen sind. Da soll es natürlich nicht so sein, dass der Hintergrund wiederholt wird oder bei kleineren Auflösungen nur links ein Hintergrund und rechts wird es nicht angezeigt, weil dort quasi die Mittelteil noch ist. Lange Rede, kurzer Sinn, es sollte also gestreckt bzw. gestaucht werden, so dass es bei verschiedenen Auflösungen passt und welche Auflösung wäre die "Optimale"?

Ich habe in der Color.Css schon einiges versucht, leider war da noch nicht das Richtige dabei.

Code: Alles auswählen

html, body {
	color: #000000;
  background-image: url(bildlink);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: #161616; 
}

Ich habe es auch schon mit background-witdh und height versucht, ob nun in 100% oder auto. Es ändert sich nichts.

Beitrag von **Kirk** » 04.12.2011 18:43

Hallo
Ersetze mal das hier background-repeat: no-repeat; durch das background-repeat: repeat;

Hier kannst du einiges darüber nachlesen http://www.css4you.de/background-repeat.html

Secretly · Beitrag von **Secretly** » 04.12.2011 18:45

Der Hintergrund soll sich eben nicht wiederholen

er soll gestreckt oder gestaucht werden.

Beitrag von **Talk19zehn** » 05.12.2011 00:11

Hello Secretly, sofern nicht weitere Ideen für dein Ziel vorgetragen werden ist die einzig mir bekannte Methode ein Hintergrundbild gänzlich je Bildschirmgröße skaliert auszugeben auf ringvemedia.com veranschaulicht und basiert auf einem Tabellenkonstrukt und einer verblüffenden CSS-Notation.
Die alles entscheidende Frage, die sich mir stellt, wie integriere ich die Vorgaben in ein phpBB3 entsprechend dem vorgegebenen QT, ohne selbst die Strukturen "gravierend" zu verändern. Erinnerlich hattest du eine feste Breite vorgegeben. Ob es reicht, lediglich die Style.CSS und das HTML-Konstrukt angepasst einzubinden, kann ich mir zunächst nicht ohne großen Aufwand vorstellen. Es sind wahrscheinlich mehr oder weniger größere Änderungen vorzunehmen. Das sind erst einmal reine Gedanken und ein Anfang einer Ausarbeitung ist ggf. gemacht?

Momentan fehlt mir jedoch etwas Zeit, - - - -

Wenn du also Lösungsansätze findest, freue ich mich über einen gedanklichen Austausch.

Allerbeste Grüße

Secretly · Beitrag von **Secretly** » 05.12.2011 02:49

Danke für den Link, dass werde ich mir mal anschauen ^^ Ansonsten hatte ich mir noch überlegt "einfach" die "Randgrafiken" des Forums dementsprechend anzupassen, so dass diese einfach in den "Hintergrund" auslaufen. Vielleicht verstehst du was ich meine

Ob das klappt, wird sich zeigen ^^

Beitrag von **Talk19zehn** » 08.12.2011 07:41

Hello Secretly,
eine Berahmung kann auch ich mir gut vorstellen. Ich habe allerdings prozentuale Angaben für das Forum.
Prosilver Theme: Test

Code: Alles auswählen

#wrap {
	width: 99%;
	margin: 10px auto;
}

und setze einen Container "herum":

Code: Alles auswählen

#containerbody {
	margin: 0;
	height: 100%;
}

Code: Alles auswählen

#rahmen1 {
    background: #f1e3c0 url("#".....jpg);
    padding: 20px;
}

#rahmen2 {
    background: #f1e3c0;
    padding: 4px;
}

#rahmen3 {
    background: #f1e3c0 url("#".....jpg);
    padding: 40px;
}

#rahmen4 {
    background: #f1e3c0 url("#"..........gif) repeat-x;
    padding: 8px;
    border: 2px inset #f1e3c0;
}

overall_header.html
nach

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

fügte ich ein:

Code: Alles auswählen

<div id="rahmen1">
<div id="rahmen2">
<div id="rahmen3">
<div id="rahmen4">
<div id="containerbody">

sieht dann so aus: Auszugsweise...
</head>

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="rahmen1">
<div id="rahmen2">
<div id="rahmen3">
<div id="rahmen4">
<div id="containerbody">
<div id="wrap">

overall_footer.html
direkt nach

Code: Alles auswählen

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

Rahmen und Container geschlossen

Code: Alles auswählen

</div></div></div></div><!-- ende rahmen1-4 //-->

</div><!-- ende containerbody //-->

Die Anzahl der Rahmen kannst du natürlich ändern. Abstände bitte ggf. ausrichten und bitte unbedingt die kleineren Auflösungen beachten.
Ende erster Test...

Denkbar sind evtl. ebenso auch diese Ideen?
Von Fall zu Fall
viewtopic.php?f=85&t=162961

viewtopic.php?p=1233597#p1233597
viewtopic.php?p=1233224#p1233224
viewtopic.php?p=1200890#p1200890

LG

Edit: RS und Links hinzugefügt..

Secretly · Beitrag von **Secretly** » 08.12.2011 14:29

Oh super danke

Das probiere ich in den nächsten Tagen mal aus.

phpBB.de

Hintergrundgrafik in verschiedenen Auflösungen.

Hintergrundgrafik in verschiedenen Auflösungen.

Re: Hintergrundgrafik in verschiedenen Auflösungen.

Re: Hintergrundgrafik in verschiedenen Auflösungen.

Re: Hintergrundgrafik in verschiedenen Auflösungen.

Re: Hintergrundgrafik in verschiedenen Auflösungen.

Re: Hintergrundgrafik in verschiedenen Auflösungen.

Re: Hintergrundgrafik in verschiedenen Auflösungen.