Hallo Leutz,
ich habe folgende Aufgabe zu bewältigen und komme nicht klar , ich bitte dringend um Hilfe!
Ich habe eine Grafikdatei (siehe Anlage) namens bg-sprites. In dieswer Datei sind 2 Einzelgrafiken mit einer Breite von 50 Pixeln und einer Höhe von 50 Pixeln enthalten.
Des weiteren existiert eine html-datei, namens index.html, deren Code folgend aufgeführt ist. Der Vereinfachung halber wurde der CSS-Code mit in den Script-Bereich der HTML-Datei geschrieben.
Aufgabe ist es nun, den DIV-Container "spielfeld" mit einer Grösse von: 950 Pixeln (Breite) und einer Höhe von 650 Pixeln wie folgt zu füllen:
Der Hintergrund des Divs soll komplett mit den Kacheln wie folgt ausgefüllt werden: Als Muster gibt es folgende Vorgabe: Sprite mit 1 = helles Bild, Sprite mit 2 = dunkles Bild.
Hier also erstmal das vorgegebene Muster:
121212...
212121...
121212...
.
.
usw.
Also immer abwechselnd, so das gleiche Sprites nicht nebeneinander liegen
Wie bekomm ich das nun hin? An welchem Element muss ich die Spritegrafiken nun aufhängen?
Hier der HTML/CSS-Code, den ich bereits habe:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>test</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
font-size:10px;
font-family:'Verdana' 'Arial';
background-color:#00ff00;
}
#spielfeld {
width:950px;
height:650px;
background: url(bg-sprites.png) no-repeat top left;
}
.sprite-1{ background-position: 0 0; width: 50px; height: 50px; }
.sprite-2{ background-position: -100px 0; width: 50px; height: 50px; }
-->
</style>
</head>
<body></body>
</html>Und hier als Anlage die Grafikdatei:
