CSS rollender Ball mit Bild?
Guten Tag,
ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.
.circle {
display: block;
width: 100px;
height: 100px;
background: url("logo.png");
border-radius: 50%;
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.
2 Antworten
![](https://images.gutefrage.net/media/user/KorbiOnRails/1580673177543_nmmslarge__1_0_2259_2259_522af7b641acd1838f283f118a6723a3.png?v=1580673178000)
Mach mal aus dem background ein background-image draus, vielleicht klappt's dann.
Die Shorthand Notation background erwartet als erstest nämlich die Eigenschaft background-color.
Du kannst es wie folgt schreiben:
background: transparent url("logo.png");
Ansonsten mal gucken, ob der Pfad zum Bild passt.
LG
![](https://images.gutefrage.net/media/user/KorbiOnRails/1580673177543_nmmslarge__1_0_2259_2259_522af7b641acd1838f283f118a6723a3.png?v=1580673178000)
![](https://images.gutefrage.net/media/user/xxSkopionxx/1610613685961_nmmslarge__0_0_2447_2448_0d65f399a9b782dc414e0d798d35cd54.jpg?v=1610613686000)
![](https://images.gutefrage.net/media/user/KorbiOnRails/1580673177543_nmmslarge__1_0_2259_2259_522af7b641acd1838f283f118a6723a3.png?v=1580673178000)
Und das Bild?
Ansonsten musst du es mal probieren mit
background: transparent url('../images/logo.png');
![](https://images.gutefrage.net/media/user/xxSkopionxx/1610613685961_nmmslarge__0_0_2447_2448_0d65f399a9b782dc414e0d798d35cd54.jpg?v=1610613686000)
ja habe ich debug mäßig auch mal da rein gemacht.
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
Vielleicht siehst du das Element aufgrund seiner absoluten Positionierung nicht. Ordne es einem Element unter, welches explizit relativ positioniert ist.
In kurz:
<div style="position: relative">
<div class="circle"></div>
</div>
Prüfe zudem, ob der Bildpfad richtig ist.
![](https://images.gutefrage.net/media/user/xxSkopionxx/1610613685961_nmmslarge__0_0_2447_2448_0d65f399a9b782dc414e0d798d35cd54.jpg?v=1610613686000)
Danke aber ich habe es so gemacht gerade eben:
<div class="circle"><img src="images/logo.png"></div>
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
![](https://images.gutefrage.net/media/user/xxSkopionxx/1610613685961_nmmslarge__0_0_2447_2448_0d65f399a9b782dc414e0d798d35cd54.jpg?v=1610613686000)
Nein ich habe in css/ auch das Bild reingemacht ) In VSC Konnte ich es sogar anklicken und kam zum Bild
Trotzdem es ruckelt ein bisschen
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
Also im Snippet deiner Frage ist der Pfad anders. Aber wie dem auch sei. Da du es lösen konntest, ist es ja gut.
![](https://images.gutefrage.net/media/user/xxSkopionxx/1610613685961_nmmslarge__0_0_2447_2448_0d65f399a9b782dc414e0d798d35cd54.jpg?v=1610613686000)
Außer das es ein bisschen ruckelt, geht es ja
Danke :) Trotzdem geht es nicht. Ich habe es aber so gelöst
<div class="circle"><img src="images/logo.png"></div>