Hallo,
ich möchte auf meiner Webseite das Hintergrundbild im Header immer wieder ändern. Das soll so einfach wie möglich funktionieren, entweder jedes Mal wenn auf der Seite was geklickt wird, oder vielleicht alle 30 Sekunden.
Den Code habe ich viel folgt in mein PHP-File eingefügt:
HTML
<div class="headeri">
<style>
.headerimg1 {
background-image: url(img/header/logo.png), linear-gradient(90deg, rgba(0, 0, 0 , 1) 0%, rgba(168, 185, 209, 0.0) 59%, rgba(0, 0, 0 , 1) 90%), url(img/header/Header1.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center center, top, top;
background-size: 340px, 150%, 150%;
padding: 40px;
}
@media (max-width: 400px){
.headerimg1 {
background-size: 250px, 180%, 180%;
background-position: center center, top, top;
}
}
.headerimg2 {
background-image: url(img/header/logo.png), linear-gradient(90deg, rgba(0, 0, 0 , 1) 0%, rgba(168, 185, 209, 0.0) 59%, rgba(0, 0, 0 , 1) 90%), url(img/header/Header2.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center center, top, top;
background-size: 340px, 150%, 150%;
padding: 40px;
}
@media (max-width: 400px){
.headerimg2 {
background-size: 250px, 180%, 180%;
background-position: center center, top, top;
}
}
.headerimg3 {
background-image: url(img/header/logo.png), linear-gradient(90deg, rgba(0, 0, 0 , 1) 0%, rgba(168, 185, 209, 0.0) 59%, rgba(0, 0, 0 , 1) 90%), url(img/header/Header3.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center center, top, top;
background-size: 340px, 150%, 150%;
padding: 40px;
}
@media (max-width: 400px){
.headerimg3 {
background-size: 250px, 180%, 180%;
background-position: center center, top, top;
}
}
<figure id="gallery">
<div class="headerimg1"></div>
<div class="headerimg2"></div>
<div class="headerimg3"></div>
</figure>
Alles anzeigen
Nun werden die 3 Bilder untereinander angezeigt. Nur wie muss ich den CSS-Code anpassen, damit die Bilder übereinander gelagert sind und sich abwechseln?
Ich habe schon verschiedenes versucht, leider erfolglos.