Seite 1 von 1
Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 04.12.2011 18:34
von Secretly
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.
Re: Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 04.12.2011 18:43
von Kirk
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
Re: Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 04.12.2011 18:45
von Secretly
Der Hintergrund soll sich eben nicht wiederholen

er soll gestreckt oder gestaucht werden.
Re: Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 05.12.2011 00:11
von Talk19zehn
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
Re: Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 05.12.2011 02:49
von Secretly
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 ^^
Re: Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 08.12.2011 07:41
von Talk19zehn
Hello Secretly,
eine Berahmung kann auch ich mir gut vorstellen. Ich habe allerdings prozentuale Angaben für das Forum.
Prosilver Theme: Test
und setze einen Container "herum":
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..

Re: Hintergrundgrafik in verschiedenen Auflösungen.
Verfasst: 08.12.2011 14:29
von Secretly
Oh super danke

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