1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Frage an Profis - Background-image : Hover

Dieses Thema im Forum "PHP & Co." wurde erstellt von schwinki, 20.05.09.

  1. schwinki

    schwinki Roter Delicious

    Dabei seit:
    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 :)
     
  2. gKar

    gKar Maunzenapfel

    Dabei seit:
    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.
    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.
     
  3. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    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.
     
  4. schwinki

    schwinki Roter Delicious

    Dabei seit:
    20.05.07
    Beiträge:
    94
    dachte ich mir :(

    die variante will ich nicht haben

    die leider auch nicht :(


    Was ich halt versuche ist folgendes:

    [​IMG]
     
  5. Bananenbieger

    Bananenbieger Golden Noble

    Dabei seit:
    14.08.05
    Beiträge:
    24.564
    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.
     
  6. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    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
     
    Bananenbieger gefällt das.
  7. Bananenbieger

    Bananenbieger Golden Noble

    Dabei seit:
    14.08.05
    Beiträge:
    24.564
    Danke, ich war zu faul, alistapart.com zu verlinken ;)
     
  8. schwinki

    schwinki Roter Delicious

    Dabei seit:
    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
     
  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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
     

Diese Seite empfehlen