Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Pure CSS Background Image Slider

Ashfaq Ahmed by Ashfaq Ahmed
December 9, 2019
in CSS Slideshow
0
Fullscreen Background Image Slider with CSS
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Looking for a pure CSS background image slider to add as background? It comes with autoplay function which is perfect to run it as background. It’s developed with CSS and fully responsive.

It’s dead lightweight. Don’t you believe me? Check out the demo and download the source and find the few lines of CSS and HTML.

At the same time, this slider is also simple without any Dot or arrow navigation. Because it is designed for a background so it also don’t have thumbnail functionality.

But you can find our previous tutorial about creating CSS Image slider with thumbnail that also support arrow navigation for easy user experience.

The autoplay function included in this slider which changes photos automatically. By the help of CSS3 animation, We will @keyframescreate left to right animation.

To make the slider to cover all the page, We will use VH element that makes the slider in full height on every type of screen resolution.

We don’t need any JavaScript to handle its functionality and it still supports wide-range of browsers. But for the older browsers, you need to provide a fallback.

How to Create CSS Background Image Slider

The markup is dead simple. We need to define an ID bgslider and then place the figure HTML5 element inside it.

We will just add images just like shown below.

<div id="bgslider">
    <figure>
        <img src="images/slide1.jpg" alt="Slider">
        <img src="images/slide2.jpg" alt="Slider">
        <img src="images/slide3.jpg" alt="Slider">
        <img src="images/slide4.jpg" alt="Slider">
        <img src="images/slide5.jpg" alt="Slider">
    </figure>
</div>

The CSS

You may think that the CSS is may be large but isn’t like that. You don’t need to write long page CSS but just need to use a few styling.

We will set to#bgslider overflow hidden.

Next, we will set the width of 500% for the figure. Why 500%? Because we have five images in the slider so each image need a width 100%

Our slider figure HTML5 attribute position will be relative, and here we will also add animation.

#bgslider { 
	overflow: hidden; 
}
#bgslider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

We set each image to be 20% of the width because we have five images in the slider so each should be divided equally. We used VH height so it fits in full screen of every type of devices.

#bgslider figure img { 
	width: 20%; 
	float: left; 
	height:100vh;
}

In the end, we will use @keyframes to slide the image slider.

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

This is what I try to do with responsive background slideshow. You can try to play with it and do customization as you want.

There are many CSS3 animations that can be used to make it slide in a different way. Hope you like this tutorial, please share this with your friends on Facebook or other social media.

Tags: Image Slider
Demo Download
Previous Post

Simple 5-Star Rating System in Plain HTML & CSS

Next Post

Background Image Slideshow using Javascript

Next Post
Background Image Slideshow using Javascript

Background Image Slideshow using Javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.