Member Avatar for OsaMasw

Hey guys.
have a nice day....
can anyone tell me how to achieve something like this slider in background ?
I used a full screen slider but can't write content in middle of it like this site
http://psnprofiles.com/

  • 2 Contributors
  • 2 Replies
  • 191 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by OsaMasw

Dani AI

Generated

Good pattern: layer full-bleed slides behind a single, centered content container. ’s jQuery approach is fine, but you can get the same result with a few absolutely positioned images (or background layers), an overlay for contrast, and a foreground wrapper that uses flexbox to center content. Keep the copy in the HTML (not baked into the images) for accessibility and SEO.

Example HTML structure:

<div class="hero">
  <div class="slides">
    <img src="slide1.jpg" class="slide" alt="" aria-hidden="true">
    <img src="slide2.jpg" class="slide" alt="" aria-hidden="true">
    <img src="slide3.jpg" class="slide" alt="" aria-hidden="true">
  </div>

  <div class="overlay"></div>

  <div class="hero-content" role="banner">
    <h1>Headline</h1>
    <p>Centered copy goes here</p>
  </div>
</div>

Minimal CSS to make it behave like a full-screen background slider:

.hero { position:relative; height:100vh; overflow:hidden; }
.slides, .overlay { position:absolute; inset:0; }
.slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.slide:first-child { opacity:1; } /* fallback if JS is off */
.slide.active { opacity:1; }
.overlay { background:rgba(0,0,0,0.35); z-index:1; pointer-events:none; }
.hero-content { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:100%; text-align:center; padding:2rem; color:#fff; }

Tiny vanilla JS to rotate slides (respect user motion preferences and provide pause/resume controls in real projects):

const slides = document.querySelectorAll('.slide');
let i = 0;
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let timer;

function show(n){ slides.forEach(s=>s.classList.remove('active')); slides[n].classList.add('active'); }

if(!prefersReduced){
  show(0);
  timer = setInterval(()=> { i = (i+1) % slides.length; show(i); }, 5000);
}

Practical tips: optimize images (WebP/AVIF, responsive srcset), preload the LCP image, add keyboard and pause controls, ensure good text contrast (or stronger overlay), and respect prefers-reduced-motion. If you want a plugin, ’s route is quick; if you need minimal dependencies and better performance, the pattern above is easy to adapt.

Recommended Answers

All 2 Replies

Member Avatar for mattster

You can achieve this with a really simple jQuery script. I've used one from here, so it's just a case of changing the background attribute with a bit of jQuery magic.

Here is a jsFiddle of how the script can be used, so all you have to do is adapt it for purpose.

Member Avatar for OsaMasw

you solve my problem :P
thank you very much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.