Background-image

#1 Joel

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 516
Beigetreten: 22. März 05
Reputation: 0

geschrieben 23. Januar 2006 - 17:38

Hallo

Ich suche eine Möglichkeit mit CSS bei einem Link ein Bild anzeigen zu lassen. Dabei soll das Bild einmal ganz angezeigt werden (auch wenn es zu gross ist).

Wenn ich nun ein zu grosses Bild habe, zeigt es mir nur einen kleinen Teil davon an.
Kann man dagegen etwas machen? :lol:

Danke

MfG Joel

Nach oben
Nach oben of the page up there ^

#2 flo

Legende

Gruppe: aktive Mitglieder
Beiträge: 7.922
Beigetreten: 14. November 04
Reputation: 1
Geschlecht:Männlich

geschrieben 23. Januar 2006 - 17:41

hm, schon mal versucht den z-index zu erhöhen?

z.b

a:hover{z-index:99;}

Nach oben
Nach oben of the page up there ^

#3 Joel

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 516
Beigetreten: 22. März 05
Reputation: 0

geschrieben 23. Januar 2006 - 17:54

Der z-index ist mir bis jetzt unbekannt :lol:

Werd mal bei Selfhtml suchen...

Danke

Nach oben
Nach oben of the page up there ^

#4 Joel

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 516
Beigetreten: 22. März 05
Reputation: 0

geschrieben 23. Januar 2006 - 18:12

Ich bin ganz sicher, ob ich das richtig verstanden habe.
Hier mal ein Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style>
<!--
a:link {
background-image:url(navi.png);
background-repeat:no-repeat;
}
a:hover {
}
//-->
</style>
</head>
<body>
<a href="www.test.de">Test</a>
</body>
</html>

Das Bild 'navi.png' ist 159 * 25 Pixel gross (also grösser als der Link). Es wird also nicht ganz dargestellt. Wie kann ich das nun ganz darstellen lassen? :lol:

Nach oben
Nach oben of the page up there ^

#5 Floele

WF-Süchtling

Gruppe: aktive Mitglieder
Beiträge: 919
Beigetreten: 22. Juni 04
Reputation: 0

geschrieben 23. Januar 2006 - 18:17

Ohne dass du den Link vergrößerst gar nicht.

Nach oben
Nach oben of the page up there ^

#6 Joel

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 516
Beigetreten: 22. März 05
Reputation: 0

geschrieben 23. Januar 2006 - 18:19

OK, und wie kann ich den Link vergrössern? mit margin? :lol:

Nach oben
Nach oben of the page up there ^

#7 flo

Legende

Gruppe: aktive Mitglieder
Beiträge: 7.922
Beigetreten: 14. November 04
Reputation: 1
Geschlecht:Männlich

geschrieben 23. Januar 2006 - 18:21

Zitat

Ohne dass du den Link vergrößerst gar nicht.

Das bild würde doch mit z-index auf eine ebene höher gelegt und dargestellt oder?

Nach oben
Nach oben of the page up there ^

#8 Joel

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 516
Beigetreten: 22. März 05
Reputation: 0

geschrieben 23. Januar 2006 - 18:24

Aber falls das klappen sollte würde man ja den Text des Linkes gar nicht mehr sehen, oder?

Nach oben
Nach oben of the page up there ^

#9 Joel

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 516
Beigetreten: 22. März 05
Reputation: 0

geschrieben 23. Januar 2006 - 18:45

Da wäre eine Lösung (habe ich von Joomla kopiert):

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

Nach oben
Nach oben of the page up there ^

#10 Floele

WF-Süchtling

Gruppe: aktive Mitglieder
Beiträge: 919
Beigetreten: 22. Juni 04
Reputation: 0

geschrieben 23. Januar 2006 - 18:54

Zitat (Flo: 23.01.2006, 18:21)

Das bild würde doch mit z-index auf eine ebene höher gelegt und dargestellt oder?

Nicht das Hintergrundbild, sondern das ganze Element.

Zitat

a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}

Mit vernünftigem Doctype könnte man sich den CSS Hack hier ersparen. Auch andere Dinge kommen mir etwas unlogisch vor...aber wenn es so funktioniert dann reicht es wohl.

Dieser Beitrag wurde von Floele bearbeitet: 23. Januar 2006 - 18:55

Nach oben
Nach oben of the page up there ^

Thema verteilen:

Seite 1 von 1

WinFuture-Forum.de: Background-image - WinFuture-Forum.de