• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

CSS Frage an Profis - Background-image : Hover

schwinki

schwinki

Roter Delicious
Registriert
20.05.07
Beiträge
94
Wisst ihr ob es möglich ist, die Hintergrundgrafik eines Hover Effekts von Links der Zeichenlänge anzupassen. Also quasi width:100% ?

die Hintergrundgrafik soll quasi immer so land sein, wie der Linktext auch ist. Nicht wiederholen aber meinetwegen verzerren.

Ich bekomme es nicht hin.

Vielen Dank

schwinki :)
 
gKar

gKar

Maunzenapfel
Registriert
25.06.08
Beiträge
5.362
Zunächst mal verquickst Du vieles. Ob man eine Hintergrundgrafik stretchen kann, ist ganz unabhängig, wofür (z.B. für einen Link) sie als Hintergrund eingestellt ist, und erst recht, ob sie immer sichtbar ist oder einen Hover-Effekt bildet.

Also kurz: Laut SelfHTML steht zu „background“ nur, dass die Grafik normalerweise horizontal wie vertikal wiederholt wird, was man aber per „background-repeat“ abschalten kann, und dass die Grafik abgeschnitten wird, falls sie größer als die zu füllende Fläche ist. Von der Möglichkeit, sie zu strecken, ist dort nirgends die Rede.
Also quasi width:100% ?
Zum Vergrößern anklicken....
Die Eigenschaft width bezieht sich ja nicht auf den Background, sondern auf das mit einem Background versehene Element. Das kann nicht funktionieren. Wenn, dann müsste es eine Eigenschaft background-width o.ä. geben — was nicht der Fall ist.

Ich bezweifle daher, dass Dein Vorhaben möglich ist.
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
im grunde geht es schon ;) also nicht das stretchen einer BG grafik, aber das was der TO will, undzwar so wie gKar es angerissen hat.

setze die grafik wie folgt im CSS des elements im backgournd ein

background: url(pfad_zur_gfx/my_img.jpg) no-repeat;

dabei sollte die grafik die grösse des grösst möglichen elements in dessen hintergund sie steht haben.
dann wird die grafik je nach element grösse abgeschnitten.

2. möglichkeit ist die grafik als pattern konstruieren und dann ohne das repeat damit sie wiederholt wird

background: url(pfad_zur_gfx/my_img.jpg);

dann wird sie in x und y achse sooft wiederholt wie die grösse des elements es benötigt.

für den hover dann einfach die klasse im css wiederholen mit :hover und eben eine andere grafik/pattern einsetzen.
 
schwinki

schwinki

Roter Delicious
Registriert
20.05.07
Beiträge
94
gKar schrieb:
Also kurz: Laut SelfHTML steht zu „background“ nur, dass die Grafik normalerweise horizontal wie vertikal wiederholt wird, was man aber per „background-repeat“ abschalten kann, und dass die Grafik abgeschnitten wird, falls sie größer als die zu füllende Fläche ist. Von der Möglichkeit, sie zu strecken, ist dort nirgends die Rede.

Ich bezweifle daher, dass Dein Vorhaben möglich ist.
Zum Vergrößern anklicken....

dachte ich mir :(

dabei sollte die grafik die grösse des grösst möglichen elements in dessen hintergund sie steht haben.
dann wird die grafik je nach element grösse abgeschnitten.
Zum Vergrößern anklicken....

die variante will ich nicht haben

2. Möglichkeit ist die grafik als pattern konstruieren und dann ohne das repeat damit sie wiederholt wird
Zum Vergrößern anklicken....

die leider auch nicht :(


Was ich halt versuche ist folgendes:

background_skalierbar.jpg
 
Bananenbieger

Bananenbieger

Golden Noble
Registriert
14.08.05
Beiträge
25.515
Vielleicht hilft die Sliding-Doors-Technik?

Das Strechen/Squeezen von Bildern mittels Browser ist generell keine gute Idee, da Pixeltransformationen je nach Browser unterschiedliche Ergebnisse bringen können.
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
korrekt, sliding doors ( <- linked ) ist stichwort, jetzt wo wir wissen was du willst ;)

du brauchst 3 graifken dafür, linke, rechte und in der mitte die als repeater
 
  • Like
Reaktionen: Bananenbieger
schwinki

schwinki

Roter Delicious
Registriert
20.05.07
Beiträge
94
hey, vielen Dank für die Antworten. Das mit den 3 Grafiken habe ich mir auch schon überlegt, hätte es aber auch in Kauf genommen, eine Grafik zu skalieren und damit auch zu verzerren.

Na ich schau mir das mal an, ob ich es mit den 3 Grafiken hinbekommen.

Nochmals vielen Dank für eure Unterstützung :)

schwinki
 
mschoening

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
nur mal um das noch kurz zu erklären. Die Technik sliding-doors verwendet nur 2 Grafiken! Das ist gerade der sinn an der Methode.

Hier ist ein Beispiel:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>untitled</title>
	
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	
	<style type="text/css">
		a {
			background: url(images/left.png) left no-repeat;
			color: #fff;
			font: 12px/1 "Helvetica Neue", sans-serif;
			padding: 12px 0 11px 57px;
		}
		
		span {
			background: url(images/right.png) right no-repeat;
			padding: 12px 57px 11px 0;
		}
	</style>
</head>

<body>
<div id="wrapper">
	<p>
		<a href="#"><span>Hello World</span></a>
	</p>
	
	<p>
		<a href="#"><span>This Is A Longer String</span></a>
	</p>
</div>
</body>
</html>

Hier kannst du dir das Beispiel mit Bildern runterladen: http://is.gd/CUkE

Max
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten