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.

Answer 1

[KorbiOnRails]

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

Comments

[xxSkopionxx]

Danke :) Trotzdem geht es nicht. Ich habe es aber so gelöst

<div class="circle"><img src="images/logo.png"></div>

[KorbiOnRails]

@xxSkopionxx

in welchem Verzeichnis liegt denn die CSS-Datei?

[xxSkopionxx]

@KorbiOnRails

/css

[KorbiOnRails]

@xxSkopionxx

Und das Bild?

Ansonsten musst du es mal probieren mit

background: transparent url('../images/logo.png');

[xxSkopionxx]

@KorbiOnRails

ja habe ich debug mäßig auch mal da rein gemacht.

Answer 2

[regex9]

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.

Comments

[xxSkopionxx]

Danke aber ich habe es so gemacht gerade eben:

<div class="circle"><img src="images/logo.png"></div>

[regex9]

@xxSkopionxx

Wie man sieht, war dein Bildpfad falsch.

[xxSkopionxx]

@regex9

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

[regex9]

@xxSkopionxx

Also im Snippet deiner Frage ist der Pfad anders. Aber wie dem auch sei. Da du es lösen konntest, ist es ja gut.

[xxSkopionxx]

@regex9

Außer das es ein bisschen ruckelt, geht es ja