CSS Grafiken dynamisch für Festerbreiten dehnen/stauchen

cumulonimbus8 · 11. Februar 2016

Hallo!

Ein Seitenkopf sollte, wie es sich ergab, mit einem horizontalen Farbverlauf versehen werden. Also Word herangezogen und 3 Rechtecke mit Verlauf über ein Grafikprogramm als dafür gedachte Datei vorbereitet. Diese sollte eher größer (Maße; Breite) als zu klein sein, wie ich las.
In der Tat lieferte dieses Paar das gewünschte Resultat:

Code:

<div id="tophead"><font face='Arial' size='1'></div>
----
#tophead{
 width:100%;
 height:77px;
 margin-top:0px;
 background: url(../Ordner/media/HeadTop.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 background-size: cover;
}

(Ich erstelle mit einfacherem Code dünne waagerechte Linien; offenbar muss ich mit dem FONT-Tag die Höhe, die DIV der Standard-Browserschrift entnimmt, überschreiben; da bleib das einfach stehen.)

Nun sollte noch ein kleiner vertikaler Farbverlauf mit den selben Mitteln (Codebeispiel) wiederum über die Fensterbreite dargestellt werden. Das misslang. Offensichtlich nimmt CSS aus (jedwe)der Datei nur die erste Pixelzeile und expandiert diese. Ein vertikaler Verlauf gibt also nur die oberste Startfarbe zurück die zudem noch auf die »height« nach unten repliziert wird. Das ist dumm…

Gibt es eine Lösung für mein Problem, mit CSS? HTML-Tabellen einzusetzen würde sicherlich auch ans Ziel führen, hier gehts mir darum ob es auch allein mit CSS zu machen ist.

CN8

FranzvonAssisi · 11. Februar 2016

cumulonimbus8 schrieb:
Ein vertikaler Verlauf gibt also nur die oberste Startfarbe zurück die zudem noch auf die »height« nach unten repliziert wird. Das ist dumm…

Schonmal in anderen Browsern ausprobiert? normalerweise wird das ganze Bild genommen... Oder verstehe ich das falsch?

Lg, Franz

thecain · 11. Februar 2016

Kannst du mal das Bild davon posten wie du dir das vorstellst?

Ich kann mir das nicht so ganz vorstellen.

cumulonimbus8 · 12. Februar 2016

«In anderen Browsern probieren» geht nicht da es in so ziemlich allen neueren (IE10 aufwärts…) tun muss.

Hier der verwendete Code:

#page-wrap{
width:100%;
position:static;
}

#topabove{
width:100%;
height:20px;
margin-top:0px;
background: url(../CHECK/media/HeadTop.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#tophead{
width:100%;
height:77px;
margin-top:0px;
background: url(../CHECK/media/HeadMiddle.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#logo{
width:312px;
height:57px;
margin-left:30px;
float:left;
margin-top:-67px;
}
#logo2{
width:248px;
height:57px;
margin-right:211px;
float:right;
margin-top:-67px;
}
#logo3{
width:151px;
height:57px;
margin-right:30px;
float:right;
margin-top:-67px;
}

#topline{
width:100%;
background-color:#1A1C37;
height:5px;
margin-top:0px;
}

.main{
float:center;
background-color:#EEEEEE;
}

#bottom{
width:100%;
background-color:#1A1C37;
height:5px;
position:relative;
}

#web{
margin-right:20px;
float:right;
font-family:Arial;
color:#000080;
font-size:10px;
margin-top:4px;
position:relative;
}

-----

<html>
<head>
<link rel="stylesheet" type="text/css" href="diedaoben.css">
</head>

<div id="page-wrap">
<div id="topabove"><font face='Arial' size='1'></div>
<div id="topline"><font face='Arial' size='1'></div>
<div id="tophead"><font face='Arial' size='1'></div>
<div id="logo"><img src="dasverdecktelinkelogo.gif"></div>
<div id="logo2"><img src="autohausmustermann.png"></div>
<div id="logo3"><img src="dasverdeckterechtelogo.png"></div>
<div id="topline"><font face='Arial' size='1'></div>

<div class="main">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="*"><font face='Arial' size='1'></font></td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50"><font face='Arial' size='1'></font></td>
<td width="*">
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
<td width="50"><font face='Arial' size='1'></font></td>
</tr>
</table>
</td>
<td width="*"><font face='Arial' size='1'></font></td>
</tr>
</table>

<br>
</div>
<div id="bottom"><font face='Arial' size='1'></font></div>
<div id="web">eine.vedececke.url</div>
</div>

</body>
</html>

Und hier ein mehr oder weniger aussagearmes Bild:

Der horizontale Farbverlauf ist klar, die Quellfgrafik habe ich gelb hinterlegt damit man sieht wo das Weiß ist. Der vertikale Verlauf, ganz oben in der Konstruktion, soll der rechten Grafik entsprechen.
Wenn jeweils nur die oberste Pixelreihe horizontal gedehnt [gestaucht] und vertikal repliziert wird kommt das sichtbare Bild bei raus.

Der verwendete Code im Spoiler könnte durchaus die falsche Syntax (no-repeat, repeat-x oder-wie-das-heißt…) enthalten. Die Aufstellung die einfach nur stur die Syntax nennt und alle Optionen knapp auflistet, die suche ich immer noch.

CN8

2016-02-13
Mir scheint, diese ganze Konstruktion um background:cover - die ich brav einem Googlen entnahm - ist für meinen Zwecke völlig verfehlt.

Suche

CSS Grafiken dynamisch für Festerbreiten dehnen/stauchen

cumulonimbus8

Fleet Admiral

FranzvonAssisi

Admiral

thecain

Ensign

cumulonimbus8

Fleet Admiral