Suche im Forum:
Suchen


Autor Nachricht
Beitrag24.07.2014 um 13:22 (UTC)    
Titel: sich an Text anpassendes Bild

Hallo,

leider konnte ich zu diesem Thema nichts finden.
Was ich mir vorstelle ist ein Hintergrundbild, das innerhalb des Contents eingefügt wird und sich bei längeren Texten anpasst.
Auf den ersten Blick könnte man meinen, das wäre die normale Hintergrundgrafik des Contents, aber was ich suche ist etwas komplizierter.

Beispielsweise wie hier:

http://www.bap.de/start/aktuell/logbuch/mittwoch-2-juli-2014-mittwoch-16-juli-2014-k%C3%B6lnbonn
http://www.bap.de/start/aktuell/logbuch/samstag-03-mai-2014-bis-samstag-31-mai-2014-k%C3%B6ln-%C3%A7irali-t%C3%BCrkei-hamburg

Wenn man sich die beiden Seiten ansieht, fällt auf, dass offensichtlich jeweils der obere und untere Teil der Hintergrundgrafik (Papier) bestehen bleiben und sich der Zwischenteil längenmäßig anpasst.

Besteht die Möglichkeit etwas in der Art auch im Design Clean umzusetzen?

Noch besser fände ich eine Lösung, bei der die gewünschte Grafik nicht den kompletten Content ausfüllen würde, sondern lediglich eine Art Textfeld bilden würde.
Ähnlich wie beispielsweise jenes in dem ich gerade schreibe.

Theoretisch könnte ich natürlich auch für jede meiner Seiten ein eigenes Hintergrundbild erstellen, aber bei Textänderungen wären diese ja wieder hinfällig. Hinzu käme noch der erhebliche benötigte Speicherplatz für die unzähligen Grafiken.

Vielen Dank schonmal,

Christoph

PS.: Es geht um diese Homepage:

http://chrisp-music.de.tl/CHRISP.htm
______________


Zuletzt bearbeitet von mumaspo am 24.07.2014, 14:23, insgesamt einmal bearbeitet
Beitrag24.07.2014 um 13:47 (UTC)    
Titel:

Ein solcher sich anpassender Hintergrund besteht immer aus drei Bilder:

Eines oben und eines unten, welche den Rahmen bilden, in diesem Fall hier sind diese in einer einzelnen Datei gespeichert:
http://www.bap.de/start/sites/all/themes/bap1/img/bg-content/bg-generic-top-bottom-4-emb.jpg

Der mittlere Bereich ist eine sich wiederhohlende Grafik, welche oben und unten nahtlos gestaltet ist, sodass es keine harten Kanten gibt, wenn man die Grafik mehrfach übereinander anzeigt. Das ist bei der von dir genannten Seite diese:
http://www.bap.de/start/sites/all/themes/bap1/img/bg-content/bg-aktuell-middle-4-emb.jpg

Im Code benötigst du also ebenfalls drei Bereiche, denen du diese Bilder als Hintergrundgrafik zuweist. Falls du :before und :after nutzt, genügt sogar ein einzelnes HTML-Element und du kannst das Oben und Unten wie einen Rahmen in CSS festlegen.

Eine Funktion, um Bilder nathlos zu machen, bietet beispielsweise GIMP (bei den Filtern). Diese Funktion macht jedoch alle vier Seiten nathlos. Wink
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag25.07.2014 um 12:32 (UTC)    
Titel:

Vielen Dank für die Erklärung!

Aber wie füge ich denn nun die Bilder in meinen Code ein?
Ich bin leider nicht gerade ein HTML-Experte und weiß nicht recht was ich mit ":before und :after" anfangen soll..

Ich könnte jetzt natürlich einfach je drei Grafiken in das Textfeld einfügen, aber wie schreibe ich dann darauf?


EDIT:

Ich habe jetzt folgenden Code gefunden, mit dem man einen Text auf ein Bild schreiben kann:
Code:
<img src="Bild-URL" height="xxxpx">
<div style="position: absolute; margin-top: -xxpx;">Text</div>

Allerdings bräuchte ich jetzt noch einen Hinweis, wie ich statt einem Hintergrundbild die genannten drei Bilder einfüge.

Provisorisch nutze ich jetzt dreimal den gleichen Code hintereinander mit je einer anderen Bildadresse.
Das Problem hierbei ist jedoch, dass die Bilder nicht nahtlos ineinander übergehen, sondern es kleine Lücken gibt.

-> siehe hier unten auf der Seite: http://chrisp-music.de.tl/Test.htm
______________


Zuletzt bearbeitet von mumaspo am 25.07.2014, 14:03, insgesamt 4-mal bearbeitet
Beitrag25.07.2014 um 15:36 (UTC)    
Titel:

dir dürfte aber schon klar sein, dass du die drei Bilder (Grafiken) nicht einfach so von dieser BAP-Seite "klauen" kannst und für deine HP benutzen kannst - COPYRIGHT Exclamation

könnte teuer werden Wink
da sollte man lieber selbst kreativ werden und sich was ausdenken, gibt ja noch jede Menge andere Möglichkeiten Wink
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur


Zuletzt bearbeitet von klein-paris am 25.07.2014, 16:38, insgesamt 2-mal bearbeitet
Beitrag25.07.2014 um 16:12 (UTC)    
Titel:

Code:
<style type="text/css">
.dynamischerHintergrund
{
   position: relative;
   width: 200px;
   background-color: blue;
   margin: 20px 0px;
}

.dynamischerHintergrund:before
{
   position: absolute;
   top: -20px;
   height: 20px;
   width: 100%;
   background-color: red;
   content: '';
}

.dynamischerHintergrund:after
{
   position: absolute;
   bottom: -20px;
   left: 0px;
   height: 20px;
   width: 100%;
   background-color: green;
   content: '';
}
</style>
Hier Text in der Homepage.
<div class="dynamischerHintergrund">Hier der Text mit dynamischem Hintergrund.</div>
Hier Text in der Homepage.


Ersetze einfach jedes background-color durch background-image und gebe an, ob sich das Bild wiederholen soll oder nicht, siehe: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

Wenn das das auf jeder Seite der Homepage haben willst, kannst du den style Abschnitt auch bei Text über dem Design einfügen, anstatt auf jeder Seite. Wenn du den dynamischen Hintergrund für den normalen Inhaltsbereich deiner Homepage verwenden willst dann kannst du edit_content_container anstatt dynamischerHintergrund im style Abschnitt angeben.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 26.07.2014, 11:24, insgesamt einmal bearbeitet
Beitrag26.07.2014 um 10:07 (UTC)    
Titel:

@klein-paris:

Keine Sorge, die BAP-Seite diente lediglich als Beispiel für die Bilder im Hintergrund; mir ging es nur ums Prinzip.
Auf Bilderklau kann ich gut verzichten. Wink

@freefunstuff:

Vielen herzlichen Dank!
Der Code war genau das, was ich brauchte.

Danke nochmal

Christoph
______________


Zuletzt bearbeitet von mumaspo am 26.07.2014, 11:08, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de