Member Avatar for rajesanthu

I Like the way Rockstar games corporation has made their site.
and I would like to know how can I fix a semitransparent slide which is scrollable over a
background which is fixed(not scrollable) and wanna change the background weekly once.
Can anybody help with code???????

  • 3 Contributors
  • 2 Replies
  • 91 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Short answer and a practical recipe that builds on what asked and the direction given by and : use a full-viewport fixed background and place your semi‑transparent content panel above it so the panel scrolls while the background stays put. Use background-attachment: fixed (or a fixed-position background element as a mobile fallback) and background-size: cover so each image fills the screen responsibly. See the CSS reference for those properties on MDN: background-attachment and background-size. For the translucent panel, prefer rgba() instead of opacity so child elements keep normal visibility: rgba().

Example skeleton (replace paths and colours as needed):

html, body {
height: 100%;
margin: 0;
}

body {
background-image: url('/images/bg1.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
}

.panel {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
background-color: rgba(255,255,255,0.85);
}

To rotate weekly: either generate/serve a different CSS/background URL from your server (cron or backend job sets the "current" image), or use a tiny client script that picks an image based on the number of weeks since epoch (works without server work). Example approach: compute weeks = Math.floor(Date.now()/(72460601000)) and use weeks % images.length to pick an image. Note: some mobile browsers historically ignore background-attachment: fixed; if you see problems, use a position: fixed full-viewport <div> behind your content as a fallback. Also avoid heavy blur effects on large images — they can hurt scroll performance on low-end devices.

Recommended Answers

All 2 Replies

Member Avatar for Arkinder

We are not here to write code for you. However, if you post a link to the site then perhaps someone can post what technique/s to Google for.

Regards, Arkinder

Edited by Arkinder because: n/a
Member Avatar for teedoff

Try googling fixed position divs or fixed position background images. That might get you in the right direction. What they did isnt that hard or complicated.

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.