Hallo
Ich muss fuer einen InfoScreen ein HTML File machen, welches einige Images und SVGs anzeigen soll. Soweit funktioniert das auch, nur dass ich es nicht hinkriege, dass das SVG die ganze definierte Breite des DIVs nutzt.
Das heisst, es funktioniert, wenn ich "background-attachment: fixed;" mache. Aber dann scrollt eben das Div (in einer Tabelle) und das Bild bleibt stehen.
Was habe ich bereits gemacht? im HTML Code ein DIV im TD drin.
Die Tabelle ist gegeben. Im Moment muss das leider so bleiben. Aber anyway, die DIVS habe eine Klasse die sind oben im HEAD Bereich definiert.
Mittels background-position habe ich den Ausschnitt gewaehlt der angezeigt werden soll; mit background-size habe ich "cover" benutzt und im background-attachment habe ich alles ausprobiert.
Sobald ich von fixed weggehe, wird rechts im SVG ein Teil abgeschnitten!
Ich war der Meinung dass "scroll" oder "local" sollte das doch mit dem Scrolling mitgehen UND KEINE Groessenanpassung erfahren, oder bin ich da falsch. Ich hab grad keine Ahnung was ich tun soll.
Die PNG und JPG funktionieren....
Evtl. hat ja jemand einen Trick oder die richtigen Styles?
Hier der Code (halt jetzt in einen einzigen HTML und auch nicht sonderlich aufgeraeumt):
Es geht um das erste Bild oben links (die Klasse heisst
.map_svg1)
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Briefingwand</title>
<style>
.map_svg1{
background-image: url('https://uwis-gravitylab.s3.amazonaws.com/map.svg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: -165px 0px;
width: 753px;
height: 520px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.nthsabc00{
background-image: url('http://www.jetplan.com/weather/data/maps/nthsabc00.gif');
background-repeat: no-repeat;
width: 753px;
height: 520px;
background-size: 100%;
}
.dwd_wetterkartenBodendruck{
background-image: url('http://www.dwd.de/DWD/wetter/wv_spez/hobbymet/wetterkarten/bwk_bodendruck_na_ana.png');
background-repeat: no-repeat;
width: 753px;
height: 520px;
background-size: 100%;
}
.polarlichtVorhersage1, .polarlichtVorhersage2{
background-image: url('http://www.polarlicht-vorhersage.de/kp_high.png');
background-repeat: no-repeat;
width: 753px;
height: 260px;
background-size: 100%;
}
/* ----------------- Zeile 3..... -------------- */
.two_atl_0d0{
background-image: url('http://www.nhc.noaa.gov/xgtwo/two_atl_0d0.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 753px;
height: 520px;
background-size: cover;
}
.typhoonmap{
background-image: url('typhoonmap.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 753px;
height: 520px;
background-size: cover;
}
.asiakarte{
background-image: url('asiakarte.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 753px;
height: 520px;
background-size: cover;
}
.delhi{
background-image: url('delhi.png');
background-repeat: no-repeat;
width: 377px;
height: 260px;
background-size: 100%;
}
.mumbai{
background-image: url('delhi.png');
background-repeat: no-repeat;
width: 377px;
height: 260px;
background-size: 100%;
}
/*------------- Zeile 4 .... ------------- */
.peking{
background-image: url('delhi.png');
background-repeat: no-repeat;
width: 377px;
height: 260px;
background-size: 100%;
}
.shanghai{
background-image: url('delhi.png');
background-repeat: no-repeat;
width: 377px;
height: 260px;
background-size: 100%;
}
</style>
</head>
<body>
<table width="2860" height="1040" border="2">
<tr>
<td width="741" rowspan="2">
<div class="map_svg1"></div>
</td>
<td width="724" rowspan="2">
<div class="nthsabc00"></div>
</td>
<td width="707" rowspan="2">
<div class="dwd_wetterkartenBodendruck"></div>
</td>
<td width="610" colspan="2">
<div class="polarlichtVorhersage1"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="polarlichtVorhersage2"></div>
</td>
</tr>
<tr>
<td rowspan="3">
<div class="two_atl_0d0"></div>
</td>
<td rowspan="3">
<div class="typhoonmap"></div>
</td>
<td rowspan="3">
<div class="asiakarte"></div>
</td>
</tr>
<tr>
<td>
<div class="delhi"></div>
</td>
<td>
<div class="mumbai"></div>
</td>
</tr>
<tr>
<td>
<div class="peking"></div>
</td>
<td>
<div class="shanghai"></div>
</td>
</tr>
</table>
</body>
</html>