Jump to content
Please Use CODE Tags

HTML/CSS/JS help- background slide show

Hazy125
By Hazy125
in Programming
 Share
Posted

I finally give up trying to get this to work by myself.... I'm designing a site. I have the layout, which is rather simplistic, header, body and a side bar with various floats and margins etc. to get everything where I want it. Then the person who I'm making the site for whats to have a nice image based background slideshow that fades from one image to the next and scrolls down with the page.... But I just cannot get it to work. The closest I got was to get one of the images behind the layout div stuff, but that completely messed up the layout. I have use of Jquery too if that's going to be an easier method.

 

Let me know what code you want and I'll add it

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

So an image slidhow? I've nade a website that has a different background when you scroll down maybe you could do that with images.. here is the link to the website  btw it is a dutch website 

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

So an image slidhow? I've nade a website that has a different background when you scroll down maybe you could do that with images.. here is the link to the website  btw it is a dutch website 

If I can get the images to at least be displayed behind my layout without completely destroying it, I should be able to make the slideshow form there with javascript....

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

If I can get the images to at least be displayed behind my layout without completely destroying it, I should be able to make the slideshow form there with javascript....

Well if you want a image as background just do (see code) in the CSS but i don't know how to make that a slideshow 

body{background-image:"...";}

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I found this it uses CSS 3 http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ Hope this helpes! 

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

 

Well if you want a image as background just do (see code) in the CSS but i don't know how to make that a slideshow 

body{background-image:"...";}

That is my problem too, it looks perfect using CSS to add the background image, but I wouldn't have a clue on how to make that a slide show.... I was hoping it would have been as simple as

<body background="image.png">

but unfortunately doing this appears to have the same effect as not having anything there at all. I'll try the other thing you posted, it looks promising

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Here's a simple way I've used for some clients before:

 

You'll need two elements, either two divs or a div and the body.

 

The div(s) needs to be positioned as fixed (top:0;right:0;bottom:0;left:0; should do the trick), this will allow them to follow you down the page.

 

Animating the backgrounds:

 

By default, layer #1 should be visible with background #1, while layer #2 should be set to zero opacity and having background #2.

When you want to switch background, fade in layer #2. When the fade is complete, change the background of layer #1 to background #2 and hide layer #2, after its hidden, change its background to background #3. Repeat this process and you'll have a smooth, simple background image slideshow.

 

So basically, just use a second layer for the fading, and only for the fading. It's super simple.  :)

Cheers,

Linus

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×