Antworten auf deine Fragen:
Neues Thema erstellen

Div soll sich bei skalierendem Hintergrund mitbewegen

limubai81

Nicht mehr ganz neu hier

Hallo ich bin mir gar nicht sicher ob mein Anliegen überhaupt umsetzbar ist aber versuchen kann man es ja mal. ;)
Es geht um folgendes Problem:

Der Div mit dem Link soll immer über der Werbetafel des skalierenden Hintergrundbildes liegen.



CSS:

Code:
img.bg {
			/* Set rules to fill background */
			min-height: 768px;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: 100%;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
}
		

#page-wrap { 
position: fixed; 
width: 90%; 
margin: 50px auto; 
min-height:768px !important; 
min-width:1024px !important;}

HTML:
<html>
<head>
</head>

<body>
<img src="bg_landingpage.jpg" class="bg">    
<div id="page-wrap">
<div id="spruch_landingpage">
Klicken und <br>
Chance ergreifen
</div>     
</div>   
</body>
</html>

Gibt es für mein Anliegen eine Lösung und wenn ja wie gehe ich das am besten an?

lg Daniel
 

TECFreddy

"alles und nichts"-Könner

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Muss es ein Div sein der geklickt werden soll? Bzw Warum muss das Bild inkl. Link skalieren?
ImageMap wäre vllt was für dich, die Koordinaten könnte man dann sicher (Annahme des Verfassers) per Javascript ändern, wenn das alles "dynamisch" sein muss.

Vielleicht hilft dir das weiter.
 

limubai81

Nicht mehr ganz neu hier

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Danke erstmal für die Hilfe, an eine Imagemap hatte ich auch schon gedacht aber da kenn ich nur eine absolute Positionierung.
Es wurde gefordert, dass das Hintergrundbild immer über den gesamten Bildschirm gehen soll. Nun stehe ich aber wie gesagt vor dem Problem, das der Link bei verschiedenen Auflösungen immer über der Werbetafel liegen soll. :rolleyes:
 

TECFreddy

"alles und nichts"-Könner

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Naja, ich kenn mich mit Javascript nicht aus, aber es sollte doch theoretisch möglich machbar sein die Koordinaten der Ecken mit der Formel anhand der aktuellen Bildgröße zu errechnen und einzutragen oder? Wie gesagt, schlag mich nicht (und die anderen auch nicht ^^ ) wenn das nicht geht.
 
AW: Div soll sich bei skalierendem Hintergrund mitbewegen

interessante Frage!
... evtl. mit einem dynamischen CSS per PHP?
Ist nur so ne Idee ... aber dann müsste die CSS ja irgendwie mitkriegen, wie groß das Fenster gerade ist .... hm.
 
AW: Div soll sich bei skalierendem Hintergrund mitbewegen

- Soll das Bild den Schirm / Bereich füllen?
- Soll das Bild dabei noch skalieren?
- steht der Nullpunkt oben links fest und die Bildgröße?

Einen skalierbaren Bereich mit einem wichtigen Link versehen - da wär ich sowieso vorsichtig. Aber das ist nur meine Meinung.
 

limubai81

Nicht mehr ganz neu hier

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Jep das Bild soll mit einer Mindestbreite von 1024px und einer Mindesthöhe von 768px den kompletten Bildschirm ausfüllen.
Aber wenn ich mir so anschaue wie viel Arbeitsaufwand da auf mich zukommen würde werde ich wohl doch einen anderen Weg einschlagen.

Da die Seite nur eine Landingpage für nen QR-Code wird, werde ich den Text mit ins Hintergrundbild aufnehmen und einen Link über die komplette Seite legen.

Trotzdem vielen Dank an euch beide für die Vorschläge.

lg Daniel
 

TobiKo

Nicht mehr ganz neu hier

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Wie wärs denn wenn du das Bild in mehrere Bilder unterteilst, die nebeneinander nahtlos positionierst und um das eine mit der Werbetafel ein Link machst? Das müsste bestimmt auch gehen.

Gruß Tobi
 

Myhar

Hat es drauf

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Mir ist zwar immer noch nicht ganz klar, was du erreichen willst. Jedoch denke ich, dass du mittels zu deinem Ziel kommen wirst. Falls du auch ältere Browser unterstützen willst/musst, suche nach einer JS Lösung.
 

limubai81

Nicht mehr ganz neu hier

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Ich wollte über die Werbetafel, welche im Hintergrundbild ist, einen Link legen. Da das Hintergrundbild sich der Bildschirmauflösung anpasst liegt die Werbetafel immer an verschiedenen Positionen. Und da war meine Frage wie man es bewerkstelligen kann, dass der Link trotzdem immer genau über der Werbetafel liegt.
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Du willst einen Werbetafel verlinken?
HTML:
so:
<a href="http://www.psd-tutorials.de/forum/46_x-html-css/..." ><img src="meinWerbebild.gif" alt="Hier ist Werbung!" /> </a>

oder so:
<a id="variante2" href="http://www.psd-tutorials.de/forum/46_x-html-css/..."> </a>
#variante2{background-image:meinWerbebild.gif}

In beiden Fällen ist das Werbebild verlinkt. Trotzdem habe ich das Gefühl, dass ich dich nicht richtig verstanden habe.
 

limubai81

Nicht mehr ganz neu hier

AW: Div soll sich bei skalierendem Hintergrund mitbewegen

Jop das merk ich schon. ;)

die Werbetafel gehört zum Hintergrundbild :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.469
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben