Background-image: als kompletten Hintergrund

Hallo zusammen,

wie die Überschrift schon sagt würde ich gerne background-image: -webkit-linear-gradient(135deg, black 20%, FireBrick 98%); als kommpletten Seitenhintergrund ausführen und nicht wie jetzt (siehe Code) nur als kleine einzelne Container (die sollen dann weg).
Ich habe mir schon einiges angeschaut aber irgendwie bekomme ich es nicht gelöst das dies dann auch funktioniert. Der Hintergrund soll natürlich auch (wenn es geht) mit wachsen das heisst, wenn das Bild größer wird zb. durch einfügen von mehr links soll dieses dann auch mit weiter wachsen so zu sagen.

Hier erstmal der Code:
[SPOILER]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scripts im Einzelnen</title>
</head>
<body>

<style>
p {
    color: white;
	margin: auto;
	-webkit-border-radius: 5px;
	height: 30px;
	border: 1px solid #333;
	line-height: 30px;
	background-image: -webkit-linear-gradient(135deg, black 20%, FireBrick 98%);
	text-align: center;
	width: 500px;
}
h1 {
    color: white;
	margin: auto;
	-webkit-border-radius: 5px;
	height: 48px;
	border: 1px solid #333;
	line-height: 48px;
	background-image: -webkit-linear-gradient(135deg, black 20%, FireBrick 98%);
	text-align: center;
	width: 500px;
}
</style>

<h1 style="font-family:'Arial'; font-weight: bold;"><align="center">Alle Scripts im einzelnen</h1>

<form id="InstallLinks">
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">TACS (Tiberium Alliances Combat Simulator)   <a href="http://bbo-almanach.de/Scripts/10000.user.js"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen wie es denn aussehen würde   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">Testscript testen   <a href="http://bbo-almanach.de/Test/testen2.html" target="_blank"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>
</form>

</body>
</html>

[/SPOILER]
Also das background-image: -webkit-linear-gradient(135deg, black 20%, FireBrick 98%); soll quasi als kommpletter Hintergrund da sein und die einzelnen Container (nenne ich sie mal) dann wegfallen.
Hier noch der Link zum ansehen wo ich es gerade mal zum testen drauf gemacht habe: Scripts im Einzelnen

Was mich auch noch verwundert ist, das die Button hinter den Namen nicht wirklich in der Mitte von der Schrift sitzen, obwohl ich sie mit align=„middle“ ja mittig zur schrift setze wenn ich mich da nicht vertue, jedoch sieht das sehr komisch aus. Vielleicht findet da ja auch noch wer den Fehler gleich mit.

Erstmal schon mal danke für´s drüber sehen und helfen :slight_smile:

Mfg Ghostleader aka Alex

Setz das -webkit-linear-gradient halt einfach als css style für das body element und nicht für p.

Hallo AmunRa,

hat super geklappt danke, das ich da net selber dran gedacht habe ^^.
Gut dann wäre das Problem mit dem Hintergrund Verlauf gelöst, jedoch bleibt noch das Problem des Buttons der sich nicht richtig in der Mitte befindet trotz Angabe, wäre super wenn da noch wer ne Idee bzw Lösung für das Problem hätte.

Mfg Ghostleader aka Alex

falls ich dich richtig verstanden habe, dann sollte dir die CSS eigenschaft vertical-align:middle helfen

LG
Amunra

Hallo AmunRa,

danke erstmal für deine fixe Antwort.

Ich habe es jetzt test weise mal für eine Zeile geändert.

css eingefügt:
p {
    vertical-align:middle;
	}

Zeile Vorher:
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;"><align="center">TACS (Tiberium Alliances Combat Simulator)   <a href="http://bbo-almanach.de/Scripts/10000.user.js"><img src="installnow.jpg" align="middle" alt="Bild" /></a></p>

Zeile Nacher:
<p style="font-family:'Arial'; font-weight: bold; font-style: italic;">TACS (Tiberium Alliances Combat Simulator)   <a href="http://bbo-almanach.de/Scripts/10000.user.js"><img src="installnow.jpg" alt="Bild" /></a></p>

Leider ändert es nichts an dem Bild installnow.jpg das es immer noch nicht mittig ist zur Schrift :frowning: immer noch zu sehen auf Scripts im Einzelnen
Vielleicht mache ich ja noch was falsch, oder es gibt noch eine andere Variante.

Lg Ghostleader aka Alex

Hallo

 
img.middle {
    vertical-align:middle;
}

<p style="font-family:'Arial'; font-weight: bold; font-style: italic;">TACS (Tiberium Alliances Combat Simulator)   <a href="http://bbo-almanach.de/Scripts/10000.user.js"><img class="middle" src="installnow.jpg" alt="Bild" /></a></p>

Probiers mal so

LG
Michael

Hallo AmunRa,

vielen lieben Dank, so funktioniert es einwandfrei :smiley:

Lg Ghostleader aka Alex