• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Div/Text an bestimmter Stelle eines Body-Hintergrundbildes fixieren

Status
Für weitere Antworten geschlossen.

Brina

Neues Mitglied
Hallo Zusammen,

ich möchte für meine 404 Seite die aus einem ganzseitigen Hintergrundbild im Body besteht, Text an einer bestimmten Stelle des Bildes fixieren. So das es responsive mit dem Bild sich verkleinert und an der selben Stelle am Hintergrundbild klebt.
Kann mir irgendwer helfen? Ich kriegs einfach nicht hin.

Vielen Dank. :smile:

Liebe Grüße Brina
 
Guten Abend, und dankeschön fürs Willkommen heißen und antworten.
Ja so ähnlich habe ich es auch probiert, dass sieht dann aus wie folgt: mein kläglicher Versuch
Das ganze funktioniert halt nur solange wie die Proportionen im Browser beibehalten werden, wird er in Höhe oder Breite unproportional verzogen, wandert der Text an eine völlig falsche Stelle.

Eigentlich ist es wahrscheinlich eh keine gute Idee die Hintergrundgrafik so einzubauen, da die Ansicht nicht wirklich Responsive und sich vorallem nicht auf Mobilgeräte einstellen kann. Aber die einzelnen Grafiken so auszurichten so auszurichten dass sie solch ein Bild ergeben das trau ich mir nicht zu...
Hast du vielleicht ne bessere Idee wie ich die Seite so gestalten kann?
Ich bin für alles offen....
 
Guten Morgen,

ja das mit dem "Geht nicht, gibts nicht" ist normalerweise auch meine Einstellung. Aber um es vernünftig hinzubekommen, hängt es da bei mir grad voll, wie ich das umsetzten könnte, so dass es passt und ich zufrieden damit sein werde... Furchtbar, wenn man nicht weiter kommt und Nächte lang Google, Youtube und Co durchforstet nach einer Lösung.

Ja so wie hier auf dem Bild.
Allerdings habe ich gestern wegen dem responsive für mobile Endgeräte rumprobiert.
Und eigentlich würde ich das am liebsten den Riss und den Text über die normalen Seiten legen, so das der Rest sich selbstständig responsive verändert und dann eben der Riss mit dem Text sich nur schwebend darüber an skaliert und an die richtige Stelle positioniert.

Aber mit dem Positionieren fällt mir das alles noch etwas schwer.

Zum Beispiel die laufenden Schatten oben rechts, würde ich gerne beim breite verringern sich unter den weißen Text in der Mobilansicht schieben lassen, da ja die Navigation dann zum Hamburger Menü wird und daher ein harter Schnitt bzw. Übergang von grau auf grün dann kommt.
Das würde durch das Bild dann etwas Smarter aussehen, glaube ich. Bisher ist das so eingestellt, das es verschwindet sobald die Seite eine gewisse Breite unterschreitet.

Tut mir leid für den Schwall an Text.
Da ich mir fast alles aus dem Bereich HTML/CSS und ein bisschen Javascript/PHP selbst bei bringe, und nur ein paar Grundlagen in meiner Weiterbildung dazu hatte, steh ich bei manchen Sachen auf dem Schlauch.

Aber wie war das mit dem "Geht ni...." Das muss irgendwie...
Ich will das einfach lernen und hinbekommen. *trotz* :wink:


1675157565546.png
 
Wie meinst du jetzt letztes Bild? Also die Hintergrundgrafik besteht aus einzelnen Ebenen die ich in Photoshop erstellt habe. Die Bilder dafür habe ich mir im Browser als Screens genommen von einer der Seiten die ich da habe. Ich denke mal darauf wolltest du hinaus oder?
Habe daraus mehrere Versionen gemacht, Media Query technisch. Habe die aber noch nicht eingebaut im CSS, da ich gestern zu müde war und seit heute früh auf Arbeit.

Na und den Screen oben mit Snipping Tool eben fix, da ich das auf Arbeit nebenbei fix gemacht habe.
 
Hallo in die Runde :smile:

ich möchte für meine 404 Seite die aus einem ganzseitigen Hintergrundbild im Body besteht, Text an einer bestimmten Stelle des Bildes fixieren. So das es responsive mit dem Bild sich verkleinert und an der selben Stelle am Hintergrundbild klebt.
Kann mir irgendwer helfen? Ich kriegs einfach nicht hin.
Mal eben kurz ein-/nachgehakt...

Warum bindest Du die Zeilen
Diese Seite scheint sich einen Riss beim Laufen zugezogen zu haben

Unter HaJo-Coaching.de findest du deinen professionellen Personal Coach, der dir gerne zeigt
wie du im Training Sportverletzungen vermeidest. Außerdem erstellt er zusammen mit dir deinen
individualen Trainingsplan und hilft dir deine persönlichen Ziele zu erreichen.
, wie schon alle übrigen Seitenbereiche/-elemente auch, nicht einfach über eine weitere PS-Ebene in diese Grafikdatei ein?

CSS:
background-size:cover
sorgt dann im Browser für die passende Bildskalierung entsprechend der jeweils vorliegenden Viewport-Größe.

"Media Queries", "Responsive Design" und eine Form der "Raketenwissenschaft" für diese selbst auferlegte diffizile Aufgabenstellung wären dann in einem einzigen Arbeitsschritt (für eine, doch recht selten ausgelöste/geladene, 404-Fehlerseite, deren Informationsgehalt sich lediglich auf eine nicht gefundene Datei/Seite beschränkt) erledigt :cool:

Nur mal so, ... als (ökonomisch pragmatischen) Denkanstoß :wink:
 
Huhu,
wie meinst du das in die Grafik Ebene einbauen? Du meinst wie als eine Hintergrundgrafik dann?
Das habe ich mit der 404 gemacht, aber ich wüsste nicht wie ich sonst den Link und den Button ans laufen bekommen würde.
Denn bisher habe ich nicht davon gehört das ich einen Text in einer PNG Datei verlinken bzw einen kleinen Bereich verlinken kann.
Das Hintergrundbild ist ja nicht über mehrere Ebenen auf der Website angelegt, sondern aus mehreren Ebenen zu einer Grafikdatei zusammen und dann als eine eingige HG-Grafik eingebettet im Body.
Ansonsten teile dein Wissen mit mir, wenn du da doch was anderes meinst.
Ich bin für jede Idee offen...
 
wie meinst du das in die Grafik Ebene einbauen?
...
Das Hintergrundbild ist ja nicht über mehrere Ebenen auf der Website angelegt, sondern aus mehreren Ebenen zu einer Grafikdatei zusammen und dann als eine eingige HG-Grafik eingebettet im Body.
Genau, Deine Photoshop-Datei besteht ja schon aus diversen Ebenen.

Nun legst Du darin eine weitere Ebene an, in der Du den gewünschten Text einfügst, und die PSD-Datei abschließend wieder als Deine PNG-Hintergrundbilddatei speicherst.

bisher habe ich nicht davon gehört das ich einen Text in einer PNG Datei verlinken bzw einen kleinen Bereich verlinken kann.
Und ja..., anklickbare/weiterführende Links und/oder Buttons können selbstverständlich in einer Grafikdatei, die als Hintergrundbild via der CSS-Eigenschaft background(-image) dient, nicht unmittelbar eingebettet werden.

Lediglich sog. verweissensitive Bereiche liessen sich mittels <map> und <area> für ein <img>-Element definieren:
... was das Ganze aber mit Blick auf "Responsive Design" noch aussichtsloser macht, da hier absolute/feste/fixe Bereiche innerhalb der Bildfläche festgelegt werden, die folglich nicht auf die jeweilige Bildskalierung bei den vorliegenden Viewport-Größen anpassend (= responsive) reagieren.

Aber davon, dass der Text weiterhin einen anklickbaren Link enthalten soll, ist im Topic (Themenbetreff), wie auch in all Deinen vorherigen Beiträgen überhaupt nicht die Rede.

Und selbst @Sempervivum hatte in seinem kleinen Quellcode-Beispiel in Anlehnung des Topics und Deiner Beschreibung eine reine Textpassage implementiert, was mir zu denken geben würde.

Von daher, immer punktgenau und zielführend das Problem in vollem Umfang beschreiben/benennen, um nicht hilfreiche bzw. hinderliche/kontraproduktive Beiträge, wie offensichtlich den meinen, von vornherein auszuschließen :wink:
 
@Spicelab:
Als erstes möchte ich mich entschuldigen wenn ich dir das Gefühl vermittelt habe, dass ich etwas ausschließe bzw. ablehne. Denn ich bin für jede Hilfe dankbar. Und ich finde es mega lieb, dass ihr euch meinem Problem überhaupt angenommen habt. ;)

Ich bin grad nur total überfordert mit diesem Mist und mich nervt das, dass ich das nicht hinbekomme.
Habe jetzt mal deinen Vorschlag umgesetzt und nur versucht den Button auf die Querys anzupassen.

Habe sogar extra mehrere Größen und Versionen des Bildes erstellt aber dennoch will es einfach nicht richtig funktionieren mit dem "Gutaussehenden Responsive".

@Sempervivum:
Auch dir noch mal ein ganz liebes Danke für all deine Mühen bisher. Ich werde morgen mal einen Test mit deinem Vorschlag machen und schauen wie das funktionieren würde.
Für heute bin ich wohl erstmal ko. War ein langer Tag.

Ich wünsche euch beiden eine gute Nacht und hübsche Träume. Werde mich morgen dann nach der Arbeit nochmal melden, wie es lief. Derweil könnt ihr gerne mein MediaQuery-Chaos mal begutachten. Vielleicht bringt es euch ja zum Schmunzeln.

Nachti *wink*
 
@Spicelab:
Als erstes möchte ich mich entschuldigen wenn ich dir das Gefühl vermittelt habe, dass ich etwas ausschließe bzw. ablehne. Denn ich bin für jede Hilfe dankbar. Und ich finde es mega lieb, dass ihr euch meinem Problem überhaupt angenommen habt. ;)
Überhaupt kein Problem :smile:

Ich habe Dir einen unverbindlichen Lösungsvorschlag unterbreitet, der Dir weiteres Kopfzerbrechen nehmen, und Dich in der Entwicklung/Produktion der Seite weiterbringen soll.

Von daher, alles gut! :smile:
 
Ich verstehe... Ich schneid morgen mal die Bilder so zu und versuche das mal. Hab das schon mal als HTML auf den Server geladen.
:)
 
Huhu,
supi dankeschön.
Ich lade sie mir direkt heute abend runter sobald ich von der Arbeit komme.
Ja wäre super wenn das dann läuft, denn ich halte mich wirklich viel zu lange an dieser Seite auf. Die ja wie ihr bereits gesagt habt, eigentlich im besten Falle nie gezeigt wird :) Welch Ironie... *lach*
Denn ich habe ja mit dem Kram den ich auf der Website noch zu machen habe (div Bilder einpflegen, Cookiebanner, diverse Texte und Seiten... und und und.
Sag mal, darf ich mal fragen, wie du zum HTML, Javascript und Co kamst?
Machst du das beruflich? Ich meine so ein Javascript z.B. schüttelt man sich ja auch nicht mal eben so ausm Ärmel.

Liebe Grüße Brina
 
Sag mal, darf ich mal fragen, wie du zum HTML, Javascript und Co kamst?
Machst du das beruflich? Ich meine so ein Javascript z.B. schüttelt man sich ja auch nicht mal eben so ausm Ärmel.
Auch wenn die Frage nicht direkt an mich gerichtet ist, möchte ich, als Beteiligter dieses Threads, dennoch gerne darauf näher eingehen, um Dir meinerseits diesbezüglich ein Feedback zu geben...:smile:

Beruflich bin ich, als ehemals gelernter Bau- & Möbelschreiner, seit über 20 Jahren in der Architektur tätig.

Seit 1999 beschäftige ich mich privat/hobbymäßig mit dem Webdesign, als ich seinerzeit die erste Fassung meiner "Homepage" auf die Beine / ins Web gestellt habe.

All das Wissen, das ich mir in den darauffolgenden Jahr(zehnt)en autodidaktisch beigebracht habe, wollte ich ab einem gewissen Punkt nicht mehr für mich alleine behalten, sondern gerne mit anderen teilen, vor allem denen, die in diesem weiten Feld der einzelnen "Disziplinen" (HTML, CSS, JS, PHP, Servertechnologien, usw.) Hilfe suchen, und habe mich so anno 2003 in einem anderen namhaften Forum registriert, um dort meine Expertise in der Community einzubringen und weiterzureichen.

Ich bin halt grundsätzlich von Natur aus (im analogen Alltag) ein sozial und hilfsbereit engagierter Mensch :smile:

Dort fiel ich dann, fast genau auf den Tag meiner Registrierung, 2005 durch mein bis dato omnipräsent großes Engagement und fundiertes Fachwissen im Forenteam auf, und wurde zum (Super)Moderator gekürt, der u.a. dann auch mit anderen Moderatorenkollegen aus den Entwickler-, Programmierer- u. Grafikerdisziplinen im Backend für die Weiterentwicklung/Individualisierung der Oberfläche/des Erscheinungsbildes der Forensoftware (vBulletin) verantwortlich war.

Im Laufe der Jahre habe ich dort dann eine Vielzahl sog. Tutorials zu diversen HTML-/CSS-/JS-Themen veröffentlicht, die in der Community so großen Anklang fanden, was mich anspornte, immer weitere "Best Practice"-Anleitungen zu publizieren, die in den "Webmaster"-FAQs Einzug fanden, um auf die seinerzeit immer wiederkehrend gleichlautenden Fragen kurzerhand mit dem entsprechend weiterführenden Link reagieren/antworten zu können - ökonomisch halt (LOL) :cool:

Ende November 2015 hat es mich dann hierher, in ein neues Umfeld, gezogen, denn zu diesem Zeitpunkt existierte das ursprünglich kollegiale und harmonische Forenteam schon lange nicht mehr.

Und auch hier wurde mein Einsatz in kürzester Zeit mit der Beförderung zum Moderator belohnt.

Kreativität war/ist schon seit meiner Kindheit ein großer Ansporn - sei es anfänglich zunächst im (Nach)zeichnen der damals populären Comic-Figuren (Asterix&Obelix, MickyMaus&Co), und später beruflich in der Entwurfslehre von Möbeln und Häusern, oder eben hobbymäßig im Screen- u. Webdesign.

Parallel zu alledem habe ich mir auch in der Musik als DJ ein weiteres kreatives (und lukratives) Standbein geschaffen, wofür mein Avatar steht :cool:
 
Auch wenn die Frage nicht direkt an mich gerichtet ist, möchte ich, als Beteiligter dieses Threads, dennoch gerne darauf näher eingehen, um Dir meinerseits diesbezüglich ein Feedback zu geben...:smile:
Na das find ich doch super... Ich mag es wenn Leute kommunikativ sind... :D

Seit 1999 beschäftige ich mich privat/hobbymäßig mit dem Webdesign, als ich seinerzeit die erste Fassung meiner "Homepage" auf die Beine / ins Web gestellt habe.
Ja so fängt es wohl immer an... *lach*

(im analogen Alltag)
Oh wow... Was bedeutet denn für dich analoger Alltag? Eintönig?

Dort fiel ich dann, fast genau auf den Tag meiner Registrierung, 2005 durch mein bis dato omnipräsent großes Engagement und fundiertes Fachwissen im Forenteam auf, und wurde zum (Super)Moderator gekürt, der u.a. dann auch mit anderen Moderatorenkollegen aus den Entwickler-, Programmierer- u. Grafikerdisziplinen im Backend für die Weiterentwicklung/Individualisierung der Oberfläche/des Erscheinungsbildes der Forensoftware (vBulletin) verantwortlich war.
Okay cool.

Klingt ja als wärst du recht vielseitig aufgestellt, mit deinen Talenten :wink:

Darf ich die Herren denn mal fragen wie alt ihr seid und wo ihr so herkommt? Ich bin immer neugierig.
Also ich bin 39 Jahre und komme aus Mönchengladbach, falls das wer kennt.
 
[offtopic]
Was bedeutet denn für dich analoger Alltag? Eintönig?
Ich/man unterscheide/t im Alltag zwischen der "analogen" und "digitalen" Welt - und nichts von beidem ist eintönig :D

Darf ich die Herren denn mal fragen wie alt ihr seid und wo ihr so herkommt?
Morgen in drei Wochen feiere ich meinen 55. Geburtstag :cool:

Mein Lebensmittelpunkt liegt in Schwetzingen (zwischen Heidelberg und Mannheim) :smile:
[/offtopic]
 
Ich/man unterscheide/t im Alltag zwischen der "analogen" und "digitalen" Welt - und nichts von beidem ist eintönig :D
Ach du meinst RL, also Reallife... Zumindest nennen wir ins der Gamer-Szene das so, wenn es sich nicht um die Online-Welt dreht.

55. Geburtstag... Cool. Wird er gebührend gefeiert?
 
Da @Brina und @Sempervivum mittlerweile ihre bisherige Kommunikation von hier auf den privaten PN-Kanal ausgelagert haben, und seit @Sempervivum's letzten Lösungsvorschlag hier von @Brina keine weitere öffentliche Rückmeldung erfolgt ist, würde mich lediglich interessieren, ob dieses Thema, respektive Problem, zwischenzeitlich gelöst wurde, damit ich den bisherigen Präfix "Frage" auf "Gelöst" aktualisieren kann...(?!)
 
Sempervivums Code in #14:

Wenn "erfahrene" Forenteilnehmer so einen Code veröffentlichen, muss man deren Kompetenz anzweifeln.

Code:
 <button class="button"><a href="index.php">Erfahre mehr</a></button>
 
Zuletzt bearbeitet:
@SpiceLab

Auch wenn das deine Auslegung nicht ganz korrekt ist. Denn da ich nach meinem letzten Post, in dem ich dir viel Spaß gewünscht habe, nichts mehr von dir gelesen habe, wollte ich dir nicht weiter auf den Keks gehen. :oops:
Und um auf deine Frage zu antworten, dass Problem ist noch nicht ganz gelöst.
Das lag aber daran, dass ich bisher nicht zu viel gekommen bin neben Arbeit und Famiie.
Wenn es dir so wichtig ist, dieses Thema zu beenden, um keine offenen Threads hier liegen zu haben, dann mach das.
Aber schade fänd ich es trotzdem. :p

@zorro

Warum gleich so pampig. Ich hatte ehrlich nicht das Gefühl als spiele sich hier wer als Tutor auf. :rolleyes:
Sempervivums Code in #14:

Wenn "erfahrene" Forenteilnehmer so einen Code veröffentlichen, muss man deren Kompetenz anzweifeln.

Code:
 <button class="button"><a href="index.php">Erfahre mehr</a></button>
Der Code ist auf meinen Mist gewachsen und es tut mir leid, dass es dich so ärgert das meine Kompetenz noch nicht auf der von anderen heran kommt.

Ich werde versuchen mich zu bessern, Meister! :wink:
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben