Heute zeige ich euch wie man einen Hintergrund Slider mit CSS erstellen kann. So wird das Hintergrundbild ausgetauscht während die Elemente gleich bleiben. Natürlich ist auch alles immer schön Responsive.
Video
HTML
<body onload="slider()">
<div class="banner">
<div class="slider">
<img src="img/abend.jpg" id="slideImg" />
</div>
<div class="overlay">
<div class="content">
<h1>Ein ganze cooler Slider</h1>
<h3>
Jetzt gut aufpassen - und youtube kanal abonnieren - jetzt - sofort
</h3>
<div>
<button type="button">Youtube</button>
<button type="button">Webseite</button>
</div>
</div>
</div>
</div>
</body>CSS
/* Grund-Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Banner Container */
.banner {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* Slider-Bereich mit Bild */
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#slideImg {
width: 100%;
height: 100%;
object-fit: cover;
animation: zoom 3s linear infinite;
}
/* Dunkle Overlay-Fläche */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1));
z-index: 1;
}
/* Inhalt */
.content {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 90%;
max-width: 800px;
margin: 0 auto;
text-align: center;
color: #fff;
padding: 1rem;
z-index: 2;
}
.content h1 {
font-size: clamp(2rem, 6vw, 4rem);
margin-bottom: 1rem;
}
.content h3 {
font-size: clamp(1rem, 3vw, 1.5rem);
margin-bottom: 2rem;
}
/* Button-Bereich */
.content > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
button {
flex: 1 1 150px;
max-width: 200px;
padding: 15px 0;
border-radius: 20px;
border: 2px solid #fe7250;
background: #fe7250;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s, border 0.3s;
}
button:hover {
background: transparent;
border: 2px solid #fff;
}
/* Zoom-Animation fürs Bild */
@keyframes zoom {
0% {
transform: scale(1.3);
}
15% {
transform: scale(1);
}
85% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
/* Responsive Ergänzungen */
@media (max-width: 600px) {
.content h1 {
font-size: 2rem;
}
.content h3 {
font-size: 1rem;
}
button {
font-size: 0.9rem;
padding: 12px 0;
}
}Javascript
var slideImg = document.getElementById("slideImg");
var images = new Array (
"img/abend.jpg",
"img/controller.jpg",
"img/vogel.jpg",
"img/hand.jpg"
);
var len = images.length;
var i = 0;
function slider(){
if(i > len-1){
i = 0;
}
slideImg.src = images[i];
i++;
setTimeout('slider()',3000);
}
