Hi
Ich (Neuling ) spiele gerade etwas mit CSS-Grid und frage mich ob ich ein Background Image zwei verschiedenen Grid Feldern zuorden kann so
dass es sich verhält als ob die zwei Felder ein Feld wären.
Mein Code ist ganz simpel. Ein Grid mit zwei Columns, einem Header und darunter zwei Felder. Ich würde gern ein background image über die Felder "start_li" und "start_re" legen
als wären beide Felder ein Feld.
html-seminar.de/woltlab/attachment/1970/
Das HTML dazu sieht so aus:
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="#start">START</a></li>
</ul>
</nav>
</header>
<section id="start_li"><a id="start"></a>start_li</section>
<section id="start_re">start_re</section>
</div>
</body>
Alles anzeigen
Und das CSS:
#wrapper {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"start_li start_re"
}
#start_li{
grid-area: start_li;
height: 100vh;
}
#start_re{
grid-area: start_re;
height:100vh;
}
Alles anzeigen
Ich habe schon die Vermutung das mein Ansatz hier falsch ist, oder gibt es doch eine Lösung?
Als Alternative hätte ich dann auch das ganze etwas anders aufgebaut. Nämlich die beiden Felder
zuerst als ein Feld implementiert, diesem ein background image gegeben und dann dieses Feld erneut
als Grid mit zwei Feldern erstellt.